El objetivo es crear un JQuery autocomplete elemento cuyos elementos de la lista tienen un fondo azul cuando están cernía sobre o enfocado a través del teclado. El Facebook cuadro de búsqueda de la tira de esta apagado bien.

Cada <li> elemento contiene HTML personalizado envuelto en un <a>. Cada uno de esos <a> etiquetas pertenece a la clase sbiAnchor. Generar el fondo azul en hover puede realizarse con éxito utilizando el siguiente CSS:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
    background: blue;
}

Pero, ¿cómo aplicar el mismo fondo azul cuando el usuario las teclas de arriba/abajo en la lista de autocompletar. Cambiar el código CSS para el siguiente NO funciona:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
    background: blue;
}

¿Cuál es el enfoque correcto aquí? Tenga en cuenta que este fondo azul efecto sólo debe aplicarse a una función autocompletar en mi página (varios de ellos existen). Es por eso que estoy usando sbiAnchor para diferenciar sus elementos a partir de los de la otra autocompletar elementos. El otro autocompleta deben conservar su comportamiento predeterminado para los selectores de CSS no debe ser demasiado amplia.

OriginalEl autor Chad Decker | 2013-02-21

8 Comentarios

  1. 23

    Este trabajo bastante fácil

    body .ui-autocomplete {
      /* font-family to all */
    }
    
    body .ui-autocomplete .ui-menu-item .ui-corner-all {
       /* all <a> */
    }
    
    body .ui-autocomplete .ui-menu-item .ui-state-focus {
       /* selected <a> */
    }
    body .ui-autocomplete .ui-menu-item.ui-state-focus { /* selected <a> */ } Hay un espacio entre las dos últimas clases, cuando no debería ser
    Y me gustaría upvote Adrián comentario:)

    OriginalEl autor Alejo JM

  2. 11

    el css de hover convertido en el formulario de esta clase de css
    Cambiar el color de fondo de jQuery autocomplete elemento basado en el estado (mediante el uso de CSS)

    se puede reemplazar .
    por ejemplo:

    .ui-state-focus {
    background: none !important;
    background-color: blue !important;
    border: none !important;}
    1+ gracias .ui-state-focus obras
    Heads up: reemplazando esta clase no funciona sin el !importante indicador para mí
    grandes obras para mí, gracias mucho , y +1

    OriginalEl autor Jala

  3. 7

    Esto cambió el hover color para mí.

    .ui-menu-item .ui-menu-item-wrapper:hover
    {
        border: none !important;
        background-color: #your-color;
    }

    OriginalEl autor Starrover

  4. 6

    He cambiado el color por:

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
    }
    Ese es el estilo respectiva en jquery-ui.css y con que la única respuesta adecuada. Todas las otras respuestas tienen efectos secundarios.
    Esta debe ser la respuesta correcta !. Gracias @Mehdi
    Sí! esta es la respuesta correcta, gracias
    Esta respuesta debe ser la de la derecha!

    OriginalEl autor Mehdi Hadjar

  5. 1

    Campos de entrada en lugar de las etiquetas de anclaje de mantener el foco. Esto debería funcionar.

    .ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
        background: blue;
    }

    OriginalEl autor Alex Williams

  6. 1

    He usado por encima de las respuestas y ajustado poco a trabajar para mi escenario (Rondando el estilo de JQuery autocomplete elementos). Esperemos que esto ayude a alguien.

    .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
        background: #6693bc !important;
        font-weight: bold !important;
        color: #ffffff !important;
    } 

    OriginalEl autor Praveen Mitta

  7. 0

    Tomó un tiempo para averiguar, pero el correcto código CSS es:

    .ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{
        background: blue;
    }

    Este mata a dos pájaros con una piedra, proporcionando un fondo azul para ambos hover y de selección a través arriba/abajo teclas. El jQuery autocomplete elemento aparentemente se trata de subir y bajar las pulsaciones de teclado como un «hover» de acción, no de una selección o de enfoque.

    OriginalEl autor Chad Decker

  8. 0

    Un viejo tema, pero las soluciones anteriores no han funcionado para mí. Si me hubiera ido directamente hacia adelante, habría sido mucho más rápido en la búsqueda de una solución:

    Sobrescribir en su hoja de estilos personalizada el siguiente estilo de jquery-ui.css

    .ui-autocomplete {
                border-radius: 0.25rem;
                background-color: #eceff1;
                padding: 0 0.6rem;
                font-family: 'ptmono';
            .ui-menu-item {
                border: 1px solid #eceff1;
                border-radius: 0.25rem;
                .ui-state-active,
        .ui-widget-content .ui-state-active,
        .ui-widget-header .ui-state-active,
        a.ui-button:active,
        .ui-button:active,
        .ui-button.ui-state-active:hover {
                background-color: #eceff1;
                border-color: #eceff1;
                color: #0d47a1;
                }
            }
        }

    Lugar de antecedentes: ninguno !importante, usted puede configurar el fondo en .interfaz de usuario-menú-punto y en la clase activa. Además, en lugar de escribir border: none !importante sobrescribir en ambas clases, el color del borde con el color de fondo, lo que impide que un cambio de la altura y con una oscilación efecto.

    OriginalEl autor Anja

Dejar respuesta

Please enter your comment!
Please enter your name here