121

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
  • 28,454
  • 37
  • 55
  • 73
Web_Designer
  • 72,308
  • 93
  • 206
  • 262

4 Answers4

151

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
  • 26,123
  • 9
  • 51
  • 114
Emmett
  • 14,035
  • 12
  • 56
  • 81
  • 8
    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
22

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
  • 26,123
  • 9
  • 51
  • 114
Antwan
  • 2,091
  • 2
  • 21
  • 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
4

This worked for me :

select option {
  color: black;
}

select:not(:checked) {
  color: gray;
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
depperm
  • 10,606
  • 4
  • 43
  • 67
Neoweiter
  • 814
  • 2
  • 9
  • 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,350
  • 9
  • 47
  • 87