0

I came across this question in an assessment test. I know its correct for radio and checkbox. But not sure about . If it doesn't work for then what can be done to add CSS to a selected drop-down option. I tried this, but it doesn't work as well.

<!DOCTYPE html>
<html>
<body>
<style>
select { color: red; }
option:not(:checked) { color: black; } 
</style>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>
pragya.go
  • 169
  • 4
  • 13
  • 1
    Possible duplicate of [CSS :selected pseudo class similar to :checked, but for – caramba Sep 30 '17 at 21:32
  • it works fine for me, tried in codepen - https://codepen.io/nagasai/pen/WZEMBb – Naga Sai A Oct 02 '17 at 02:56

1 Answers1

0

To style the currently selected option in the closed dropdown you could use:

    select { color: red; }
 option:not(:checked) { color: black; } /* or whatever your default style is */

See this: CSS :selected pseudo class similar to :checked, but for <select> elements

  • You can see this in action ar: https://jsfiddle.net/1rr9zs83 . I tried it in chrome and it works but i don't know if it works also in other browsers. Obviously it doesn't work on mobile decice. –  Oct 01 '17 at 07:34