Aplicar CSS a <f: selectItem> anidado en <h: selectOneMenu>

Deseo aplicar CSS específico a <f:selectItem> en <h:selectOneMenu> para que se muestre en un estilo diferente.Aplicar CSS a <f: selectItem> anidado en <h: selectOneMenu>

p. Ej. Quiero que todas las opciones de café en la lista a continuación se muestren en un color diferente.

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

¿Alguien me puede ayudar aquí?

Fuente

2011-07-19 Sana

-4

No estoy familiarizado con JSF, pero supongo que el <f:selectItem> no es lo que se envía al navegador.

Necesitará averiguar qué HTML es enviado al navegador para esa etiqueta JSF, y aplique su CSS a eso.

Fuente

2011-07-19 13:28:19

El <f:selectItem> representa un elemento HTML <option>. Tiene un soporte de estilo de CSS muy limitado. La propiedad color no se encuentra entre ellos. Aún más, funciona solo en MSIE, no en otros navegadores web. Sin embargo, no hay forma de darle a cada elemento <option> su propio atributo style por JSF, por lo que lo más cercano que puede obtener es aplicar una regla CSS en todas las opciones y aceptar que solo funciona en MSIE.

<h:selectOneMenu styleClass="mymenu">

con

.mymenu option { 
    color: red; 
}

Su mejor opción es reemplazar el menú desplegable por un <ul><li> con un disparo de CSS/JavaScript que imita que se vea como un menú desplegable. Algunas bibliotecas de componentes JSF tienen dicho componente, como PrimeFaces '<p:selectOneMenu>. Compruebe el contenido personalizado ejemplo en su 3.0 showcase.

Fuente

2011-07-19 13:37:49 BalusC

¿Qué pasa con 'h: selectOneRadio'? Tengo un requisito en el que hay 3 opciones, cada una de las cuales tiene una etiqueta de color diferente. No puedo encontrar una manera de hacer eso con la radio en jsf. Parece que se está renderizando como una tabla con un '' y un '' label correspondiente para = 'xxx'> 'en cada celda. Parece que deberían permitir estilos CSS en la misma línea que 'h: panelGrid', pero no parece que lo hagan. ¿Conoces algún truco para esto? – Lucas

@Lucas: http://stackoverflow.com/questions/6033955/jsf-more-customizable-selectmanycheckbox-and-selectoneradio – BalusC

Gracias, eso funcionará, pero actualmente no estamos usando tomahawk. Tendré que ver si eso se puede agregar a nuestro entorno sin consecuencias negativas (parece que demasiados marcos es algo malo). De todos modos, encontré una forma de hackish para hacerlo con jsf predeterminado: ' ' css: ' .choices input [value = "yes"] + label {color: green} .choices input [value = "no"] + etiqueta {color: red} ' – Lucas

Aplicar CSS a <f: selectItem> anidado en <h: selectOneMenu>

Respuesta

Cuestiones relacionadas