CSS'yi <f: selectItem> uygulamasında <h: selectOneMenu>

Question

Farklı bir biçimde görüntülenebilmesi için <h:selectOneMenu><f:selectItem>'a CSS'yi uygulamak istiyorum.

örn. Aşağıdaki listede her kahve seçeneği farklı bir renkte görüntülenmesini istiyorum.

<h:selectOneMenu value="#{user.favCoffee1}"> 
    <f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" /> 
    <f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" /> 
    <f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" /> 
</h:selectOneMenu>` 

Herkes bana yardım edebilir mi?

Answer 1

JSF ile familar değilim, ancak tarayıcıya gönderilenin <f:selectItem> olduğunu kabul etmiyorum.

Bu JSF etiketi için tarayıcıya gönderilen HTML öğesinin ne olduğunu bulmanız ve buna CSS uygulamanızı uygulamanız gerekir.

Answer 2

<f:selectItem>, bir HTML <option> öğesi oluşturur. Çok sınırlı CSS stil desteğine sahiptir. color özelliği aralarında değil. Dahası, sadece başka web tarayıcılarında değil, MSIE'de çalışır. Ancak, her <option> öğesinin kendi style özniteliğini JSF'ye vermenin bir yolu yoktur, bu nedenle alabileceğiniz en yakın şey, tüm seçenekler için bir CSS kuralı uygulamak ve yalnızca MSIE'de çalıştığını kabul etmektir.

.mymenu option { 
    color: red; 
} 

En iyi bahis ile

<h:selectOneMenu styleClass="mymenu"> 

bir açılır gibi görünmek taklit CSS/JavaScript iyi atış ile <ul><li> tarafından açılan değiştirmektir. Bazı JSF bileşen kitaplıklarında PrimeFaces '<p:selectOneMenu> gibi bir bileşen bulunur. Özel içeriği 3.0 showcase örneğinde örneğini kontrol edin.