web-dev-qa-db-fra.com

Changer la couleur de fond de l'élément à complétion automatique jQuery en fonction de l'état (en utilisant CSS)

L'objectif est de créer un élément JQuery autocomplete dont les éléments de la liste ont un arrière-plan bleu lorsqu'ils sont survolés ou mis au point via le clavier. La boîte de recherche Facebook tire cela bien.

Chaque élément <li> contient du code HTML personnalisé enveloppé dans un <a>. Chacune de ces balises <a> appartient à la classe sbiAnchor. La génération du fond bleu en survol peut être effectuée avec succès en utilisant le CSS suivant:

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

Mais comment appliquer ce même arrière-plan bleu lorsque l'utilisateur appuie en haut ou en bas de la liste de saisie semi-automatique. Changer le code CSS comme suit ne marche PAS:

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

Quelle est la bonne approche ici? Gardez à l'esprit que cet effet de fond bleu ne devrait s'appliquer qu'à un autocompléte spécifique sur ma page (plusieurs d'entre eux existent). C'est pourquoi j'utilise sbiAnchor pour différencier ses éléments de ceux des autres éléments à complétion automatique. Les autres autocompletes doivent conserver leur comportement par défaut pour que les sélecteurs CSS ne soient pas trop larges.

jquerycssbackgroundjquery-autocomplete
11
Chad Decker

Ce travail assez facile 

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> */
}
23
Alejo JM

les css du survol deviennent cette classe css enter image description here

vous pouvez le remplacer. par exemple:

.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;}
11
Jala

Cela a changé la couleur de vol stationnaire pour moi.

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

J'ai changé la couleur par:

.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 {
}
6
Mehdi Hadjar

J'ai utilisé les réponses ci-dessus et modifié un petit peu pour travailler pour mon scénario (style survolant pour les éléments JQuery autocomplete). Espérons que cela aide quelqu'un.

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

Les champs d'entrée plutôt que les balises d'ancrage restent actifs. Cela devrait marcher.

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

Il a fallu du temps pour le comprendre, mais le code CSS correct est le suivant:

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

Cela tue deux oiseaux avec une pierre, fournissant un fond bleu pour la sélection stationnaire et / via les touches haut/bas. L'élément autocomplete jQuery traite apparemment les frappes haut/bas comme une action "survol", et non une sélection ou une mise au point. 

0
Chad Decker

Un sujet si ancien, mais les solutions ci-dessus n'ont pas fonctionné pour moi. Si j'étais allé tout droit, j'aurais été beaucoup plus rapide dans la recherche d'une solution:

Remplacez dans votre feuille de style personnalisée le style suivant 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;
            }
        }
    }

Au lieu de background: none! Important, vous pouvez définir l'arrière-plan dans .ui-menu-item et dans la classe active. De plus, au lieu d’écrire border: nécéssité, vous écrasez dans les deux classes la couleur de la bordure avec celle de l’arrière-plan, ce qui empêche un changement de hauteur et provoque un effet de wobble.

0
Anja