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

71
8

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>

How to change colour of select dropdown arrow?

2 Answers2