CSS: seçili sözde sınıf şuna benzer: işaretlendi, ancak <select> öğeleri için

Bir öğedeki şu anda seçili <option>öğeyi biçimlendirmenin bir yolu var mı <select>?

Daha sonra seçili olan seçenek öğesine bir arka plan rengi verebilir miyim? Bu şekilde, şu anda kapalı açılır menüde görüntülenebilen seçeneğin stilini belirleyebilirim.

:checkedSözde sınıf başlangıçta HTML4 sahip bu tür elemanların için geçerlidir selectedve checkedözelliklerini

Kaynak: w3.org

Bu CSS işe yarıyor, ancak stil colorher tarayıcıda mümkün olmasa da:

option:checked { color: red; }

Bunun bir örneği, şu anda seçili olan öğeyi açılır listeden gizleyerek.

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Kapalı açılır menüde de o anda seçili olan seçeneği biçimlendirmek için mantığı tersine çevirmeyi deneyebilirsiniz:

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

Aslında sadece birkaç CSS özelliğini biçimlendirebilirsiniz : değiştirilmiş seçenek öğeleri. colorçalışmıyor background-color, ancak bir background-image.

Hile yapmak için bunu gradyanlarla birleştirebilirsiniz.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Geko / webkit üzerinde çalışır.

Bu benim için çalıştı:

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