İş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.
Bir <option>
öğ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.
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
vecolor
dışında, seçenek öğesi için stil nesnesi aracılığıyla uygulanan stil ayarları yoksayılır.
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');
});