124

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.

0

4 Answers 4

154

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 */
4
  • 8
    Did you test it? It doesn't seem to work for me on FF8. update: it doesn't work in Chromium 15 either.
    – Brigand
    Dec 23, 2011 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. Dec 23, 2011 at 18:48
  • 2
    @Web_Designer Ok, I see the issue. I edited my answer with another (wonky) solution.
    – Emmett
    Dec 23, 2011 at 18:53
  • accepted answer doesn't work for me in chrome. you can test here: jsfiddle.net/hk4s0ech Oct 21, 2014 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.

3
  • The accepted answer did not work for me, but this solution did. Thank you! Oct 6, 2016 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 1, 2020 at 22:03
  • This doesn't work either.
    – Slbox
    Sep 28 at 7:59
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>

1
  • 1
    This works with cypress, unlike :selected.
    – cham
    Jun 22, 2022 at 4:36
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>

1
  • 1
    What? display none for the first option? What will that achive?
    – neoswf
    Jan 20, 2022 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.