103

Is there a way to style the currently selected <option> element in a <select> element?

I could then give a background color to the currently selected option element? That way I can style the option that's currently viewable in the closed dropdown.

showdev
  • 27,301
  • 36
  • 51
  • 71
Web_Designer
  • 68,768
  • 89
  • 200
  • 259

4 Answers4

135

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

Source: w3.org

So, this CSS works, although styling the color is not possible in every browser:

option:checked { color: red; }

An example of this in action, hiding the currently selected item from the drop down list.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

To style the currently selected option in the closed dropdown as well, you could try reversing the logic:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */
David Mulder
  • 25,055
  • 8
  • 49
  • 108
Emmett
  • 13,507
  • 12
  • 54
  • 79
  • 7
    Did you test it? It [doesn't seem to work](http://jsfiddle.net/UUznB/) for me on FF8. *update:* it doesn't work in Chromium 15 either. – Brigand Dec 23 '11 at 18:41
  • 1
    @emmett I too checked it in Chrome 16. As I said in my previous comment it styles the selected option in the dropdown list, but not the one in the closed viewable area. – Web_Designer Dec 23 '11 at 18:48
  • 2
    @Web_Designer Ok, I see the issue. I edited my answer with another (wonky) solution. – Emmett Dec 23 '11 at 18:53
  • accepted answer doesn't work for me in chrome. you can test here: http://jsfiddle.net/hk4s0ech/ – Andre Chenier Oct 21 '14 at 16:39
21

Actually you can only style few CSS properties on :modified option elements. color does not work, background-color either, but you can set a background-image.

You can couple this with gradients to do the trick.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Works on gecko/webkit.

David Mulder
  • 25,055
  • 8
  • 49
  • 108
Antwan
  • 1,911
  • 1
  • 20
  • 25
  • The accepted answer did not work for me, but this solution did. Thank you! – Anthony Hilyard Oct 06 '16 at 17:01
  • Note that you can also apply filter to it like this: Option:checked{filter:grayscale(1);} This is similar to how nowadays you can style checkboxes and radiobuttons in Chrome to make them non-blue. – KS74 Sep 01 '20 at 22:03
3

This worked for me :

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
Neoweiter
  • 744
  • 2
  • 8
  • 17
0

The css from the accepted answer also doesn't work for me. But this inline style works. Tested on Firefox 86 and Chrome 88.

<select>
    <option value="1" style="display:none;" selected>One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
user2366975
  • 4,018
  • 7
  • 42
  • 83