How to change html select arrow color?-CodePudding

How to change the color of the dropdown arrow? (Same style arrow)

#cars{
width:150px;
}

<!DOCTYPE html>
<html>
<body>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</body>
</html>

CodePudding user response：

This can depend on the Browser you are viewing it in, but usually you only need to set the color attribute to your desired color.

#cars{
  width:150px;
  color: red; // add this line
}

<!DOCTYPE html>
<html>
<body>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</body>
</html>

CodePudding user response：

To start with the conclusion, you can't change. So most UI libraries create containers that wrap around Select Box, and use virtual selectors to customize arrows.
The example below might help.

HTML CSS Change Color of SELECT ARROW

CodePudding user response：

You cannot simply change the color. Remove the default one and add your custom SVG/image in the background. In below CSS, replace background URL with your custom SVG/image

select{
     background: url(data:image/svg xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM PHRpdGxlPmFycm93czwvdGl0bGU PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8 PC9zdmc ) no-repeat 100% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}