Bir html "select" öğesinin seçeneği nasıl şekillendirilir?

İşte benim HTML'im:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Yalnızca CSS kullanarak ürünün adını (yani 'Ürün1', 'Ürün2', vb.) kalın ve kategorilerini (yani Elektronik, Spor, vb.) italik yapmak istiyorum. HTML ve CSS kullanarak bunun mümkün olmadığından bahseden eski bir soru buldum, ama umarım şimdi bir çözüm vardır.

TylerH
Edited question 2019ösp5ös14 Mart 2019 в 2:05
Programlama
html css drop-down-menu
2011ösp2ös18 Ağustos 2011 в 6:02
2 görünümler
Çözüm

Bir `` öğesine uygulanabilecek yalnızca birkaç stil niteliği vardır.

Bunun nedeni, bu tür bir öğenin "değiştirilmiş öğe" örneği olmasıdır. İşletim sistemine bağımlıdırlar ve HTML/tarayıcının bir parçası değildirler. CSS` ile şekillendirilemez.

Bir <select> gibi görünen ancak aslında CAN şekillendirilebilen normal HTML öğelerinden oluşan yedek eklentiler/kütüphaneler vardır.

Jacob
Edited answer 2019ööp58öö9 Eylül 2019 в 9:58
Yorumlar (8)

Hayır, bu mümkün değildir, çünkü bu öğeler için stil oluşturma kullanıcının işletim sistemi tarafından gerçekleştirilir. MSDN sorunuzu burada yanıtlayacaktır:

background-color ve color dışında, seçenek öğesi için stil nesnesi aracılığıyla uygulanan stil ayarları yoksayılır.

georgeawg
Edited answer 2019ösp10ös20 Kasım 2019 в 8:10
Yorumlar (6)

Yukarıda belirtildiği gibi, gerçekten mümkün değil; ancak, bir kullanıcı alanla etkileşime girmeden önce 'Ürün Seç...' seçeneği gibi bir şey için başlangıç durumunu biçimlendirmek istiyorsanız, aşağıdaki gibi bir şey yapabilirsiniz --

Aşağıdaki örnek ilk seçeneği (teknik olarak tümünü) kırmızı olarak stilize eder ve kullanıcı etkileşime girdiğinde bu seçeneği (value="defaultValue" ayarlı olan) kaldırır ve seçime uygulanan sınıfı kaldırır. Renk dışında başka seçenekler de uygulayabilirsiniz, ancak bunlar liste görünümünü değil, yalnızca değiştirildiğinde alanı etkileyecektir.

CSS

.default-value{
  color: red;
}

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});
Victor Bjelkholm
Edited answer 2013ösp41ös15 Nisan 2013 в 3:41
Yorumlar (0)