¿Cómo puedo cambiar el color de fondo de cernía/elemento resaltado de <p:selectOneMenu>?

He probado las siguientes selectores de CSS, pero no tiene ningún efecto.

.ui-selectonemenu-items :hover{
    background-color: #a9c6c9;
}
.ui-selectonemenu-label:hover {
    background-color: #a9c6c9;
}

Aquí está el código JSF:

<p:selectOneMenu>
    <f:selectItem itemLabel="by id" itemValue="1" />
    <f:selectItem itemLabel="by owner" itemValue="2" />
</p:selectOneMenu>

HTML de salida:

<ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" style="">
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">Select Net</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all ui-state-highlight">TEST</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">TEST1</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">TEST2</li>
  • Ano podría usted por favor actualizar el post con el código html?
  • Pobre Angus no merece ser un Ano…. de cualquier manera, por favor, usted puede publicar el código HTML. Gracias.
  • Angus, eran más pidiendo el JSF generado por la salida de HTML (exactamente como se puede ver al hacer click derecho y Ver código Fuente en el navegador web), simplemente porque CSS trabaja directamente con el DOM de HTML árbol y no con el JSF árbol de componentes (y, por tanto, su JSF fragmento de código es ununderstandable a la media de la CSS de expertos). En el futuro JSF+CSS problemas/preguntas, usted debe buscar en/proporcionar el JSF-genera código HTML de salida, no la cruda JSF código fuente.
InformationsquelleAutor angus | 2012-08-16

2 Comentarios

  1. 2

    Probar este:

    .ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
        background: #a9c6c9;
    }
    • finalmente 🙂 – su trabajo gracias
  2. 2

    De acuerdo con el Chrome dev tools (presione F12), es el .ui-state-highlight de la clase de la que es responsable el aspecto del fondo en .ui-selectonemenu-item elemento.

    Cómo cambiar el color de fondo de cernía/elemento resaltado de <p:selectOneMenu>?

    Es así, usted necesita para reemplazar esa clase en lugar.

    .ui-selectonemenu-item.ui-state-highlight {
        background-color: #a9c6c9;
    }

    Firefox (Firebug) y IE9 por la forma en que la misma herramienta. Botón derecho del ratón en el elemento de la representación de HTML y elegir Inspeccionar Elemento, o simplemente presione F12 para ver.

    • si voy a añadir color .la interfaz de usuario selectonemenu-objeto.interfaz de usuario-estado-de relieve, a continuación, el color del texto será el cambio, pero no el fondo
    • Eso es totalmente como se esperaba. El color propiedad cambia sólo el primer plano (texto) de color. Para cambiar el color de fondo que necesita el background-color propiedad, exactamente como lo demostró en su propia pregunta y mi respuesta.
    • no sé qué estoy haciendo mal, pero no está funcionando para mí. gracias por la ayuda

Dejar respuesta

Please enter your comment!
Please enter your name here