Kevin Powell - Community•10mo ago

How to change color of the select dropdown icon

Is there a way to change the color of the dropdown icon?, i am not using any library. just the <select> html tag

6 Replies

Caps-look•10mo ago

for blue background "select{background: blue;}" and alike for other colors

Jus Sus || 💀OP•10mo ago

@Caps-look i want to change the icon color, is it possible?

Caps-look•10mo ago

ahh, sorry so instead of 'background' use 'color' It will change text and icon color

MarkBoots•10mo ago

this is a bit of a hack (don't know how it works in all browsers) But if you want to have different colors for the text and the icon:

select { 
  color: red; /* set text + arrow to red */
  -webkit-text-fill-color: black; /* set only the text to black*/

  > option {
    color: black; /* set the options to black
  }
}

select { 
  color: red; /* set text + arrow to red */
  -webkit-text-fill-color: black; /* set only the text to black*/

  > option {
    color: black; /* set the options to black
  }
}

MarkBoots•10mo ago

capt_uhu•10mo ago

just checked this in Firefox. -webkit-text-fill-color: black; is supported in FF but it changes the color of both the text and the arrow. So that's a no go in FF

Gaming

Programming

How to change color of the select dropdown icon