Примените CSS к <f: selectItem>, вложенному в <h: selectOneMenu>

Я хочу применить CSS, специфичный для <f:selectItem> в <h:selectOneMenu>, для отображения в другом стиле.

например. Я хочу, чтобы каждый вариант кофе в списке ниже отображался в другом цвете.

<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>`

Может ли кто-нибудь помочь мне здесь?

Ответ 1

<f:selectItem> отображает элемент HTML <option>. Он имеет очень ограниченную поддержку стилей CSS. Свойство color не входит в их число. Более того, он работает только в MSIE, а не в других веб-браузерах. Однако нет способа дать каждому элементу <option> свой собственный атрибут style JSF, поэтому самое близкое, что вы можете получить, это применить правило CSS для всех параметров и принять, что оно работает только в MSIE.

<h:selectOneMenu styleClass="mymenu">

с

.mymenu option {
    color: red;
}

Лучше всего заменить выпадающий снимок <ul><li> хорошим снимком CSS/JavaScript, который имитирует его, как выпадающий список. В некоторых библиотеках компонентов JSF есть такой компонент, как PrimeFaces '<p:selectOneMenu>. Проверьте пример пользовательского содержимого в 3.0 витрине.

Ответ 2

Я не знаком с JSF, но я полагаю, что <f:selectItem> не является тем, что отправляется в браузер.

Вам нужно выяснить, какой HTML отправлен в браузер для этого тега JSF, и применить к нему свой CSS.