How to change html select arrow color?

Question

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>

score 1 · Answer 1 · answered Jun 16 '22 at 07:30

1

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>

answered Jun 16 '22 at 07:30

Gebes

312
2
9

Hi thanks for the answer. But i want just to change color of the arrow. – Sreehari Avikkal Jun 19 '22 at 11:47

score 1 · Answer 2 · answered Jun 16 '22 at 07:35

1

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

answered Jun 16 '22 at 07:35

U.Dev

103
7

score 1 · Answer 3 · answered Jun 16 '22 at 07:38

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

How to change html select arrow color?

3 Answers3