How to change colour of select dropdown arrow?-CodePudding

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  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>

CodePudding user response：

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

CodePudding user response：

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='#ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") right .75rem center/8px 10px no-repeat!important;
 }

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

<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>