How to change colour of select dropdown arrow?

Question

I am trying to change the colour of select dropdown arrow using CSS. Currently, it is in black colour. I want to change it to white colour.

Can anyone have any idea to solve this issue?

html

    <select class="custom-select mt-1 ml-2" id="e" style="font-family:Poppins;1px solid #FFFFFF;font-size:12px;color: #000000;border-radius: 30px;width:130px;height:36px;background-color:#5A71E1;color:#FFFFFF;">
            <option value="Andhra Pradesh" selected style="color:#FFFFFF;">English</option>
            <option value="Karnataka" style="color:#FFFFFF;">Malayalam</option>
            <option value="Kerala" style="color:#FFFFFF;">Hindi</option>
            <option value="Tamil Nadu" style="color:#FFFFFF;">Telungu</option>
            <option value="Telungana" style="color:#FFFFFF;">Kannada</option>
    </select>

It is white `v` in Firefox and Google Chrome. From your screenshot I think it is in mobile screen? You are using default select box triangle symbol, I recommend use [cusom triangle](https://stackoverflow.com/questions/31531865/css-change-dropdown-arrow-to-unicode-triangle). — vee, Apr 07 '22 at 04:50
Actually , it is desktop screen. I Croped the screenshot.@ vee — Abin Benny, Apr 07 '22 at 04:57
Refer to this solution: https://stackoverflow.com/questions/31531865/css-change-dropdown-arrow-to-unicode-triangle — Ritik Banger, Apr 07 '22 at 05:03
Ok. I got the answer from this link:https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css?noredirect=1&lq=1.Thanks for your support@Ritik Banger @vee — Abin Benny, Apr 07 '22 at 05:09
@AbinBenny I talk about browser **name**. Glad that problem solved. — vee, Apr 07 '22 at 05:56

score 0 · Accepted Answer · answered Apr 07 '22 at 05:10

0

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

answered Apr 07 '22 at 05:10

Abin Benny

125
2
10

score 0 · Answer 2 · answered Apr 07 '22 at 05:38

You are using Bootstrap v4+ because of custom-select is pre-defined class in bootstrap css file. So if you want to change arrow color of SELECT element then you need to change from css backgound propetry to fill="#ffffff" inside svg.

I hope below snippet will help you a lot.

body{
  background: #5a71e1 !important;
  padding: 20px;
}


.custom-select{
  font-family: Poppins;
  border: 1px solid #FFFFFF !important;
  font-size: 12px!important;
  border-radius: 30px!important;
  width: 130px!important;
  height: 36px;
  background-color: #5A71E1!important;
  color: #FFFFFF!important;
  background: #5A71E1 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") right .75rem center/8px 10px no-repeat!important;
 }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<select class="custom-select">
  <option value="Andhra Pradesh" selected>English</option>
  <option value="Karnataka">Malayalam</option>
  <option value="Kerala">Hindi</option>
  <option value="Tamil Nadu">Telungu</option>
  <option value="Telungana">Kannada</option>
</select>

APorto · Answer 3 · 2022-08-19T11:51:49.360

-1

I got the SVG information directly from the object and paste the information on URL part. On the fill= part you can change colors and on 1rem part you can modify the distance between the arrow and the label. The no-repeat part indicate to only print one arrow.

select {
    background: #404040 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23ffffff" d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>') right 1rem center/8px 10px no-repeat;
}

edited Aug 19 '22 at 11:51

answered Aug 14 '22 at 14:51

APorto

11
4

1

Welcome! While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – jasie Aug 18 '22 at 10:39

How to change colour of select dropdown arrow?

3 Answers3