CSS: the selected pseudo-class is similar to: checked, but for <select> elements

Question

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

Then could I set the background color for the selected selection? This way, I can configure the parameter that is currently being viewed in a closed drop-down list.

Answer 1

class pseudo-class :checked initially applied to elements that have HTML4 selected and checked attributes

Source: w3.org

---

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

 option:checked { color: red; } 

---

An example of this is 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 change the currently selected parameter in the closed drop-down menu, you can try changing the logic:

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

Answer 2

In fact, you can only create a few CSS properties: modified element elements. color does not work, background-color , but you can set background-image .

You can associate 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> 

Powered by gecko / webkit.

Answer 3

This worked for me:

 select option { color: black; } select:not(:checked) { color: gray; }