CSS pour autocomplete

Résolu/Fermé

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - Modifié le 19 août 2022 à 12:16
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 19 août 2022 à 18:16

Bonjour,

J'ai créé sur un formulaire un input avec une fonction autocomplete. La partie mécanique fonctionne mais j'aimerai pour rendre l'ensemble plus fonctionnel et esthétique ajouter un peu de CSS...

J'ai réussi à trouver le code généré par JQuery en bas de page, j'ai donc pu affecter du css sur les propositions qui apparaissent en cours de saisie et sur leur survol à la souris :

.ui-menu-item-wrapper {
    padding: 10px;
    cursor: pointer;
    background-color: #1c4d92;
    width: 340px;
    color: #dcf5fe;
    border: 1px solid #cfd3d5;
}

.ui-menu-item-wrapper:hover{
    background-color: whitesmoke;
    color: blueviolet;

}

Par contre je n'arrive pas à cibler les propositions quand je me déplace avec la flèche haute ou basse ?
Quelles instructions faut-il utiliser ?

Merci d'avance pour votre aide !

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" unselectable="on" style="display: none; position: relative; top: -922px; left: 25px; width: 1281px;">
   <li class="ui-menu-item">
      <div id="ui-id-34" tabindex="-1" class="ui-menu-item-wrapper">CLIENT 1</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-35" tabindex="-1" class="ui-menu-item-wrapper">CLIENT 2</div>
   </li>
</ul>

Linux / Chrome 104.0.0.0

A voir également:

2 réponses

Réponse 1 / 2

Pitet
19 août 2022 à 15:57

Bonjour,

jQuery UI applique la classe .ui-state-active sur l'élément actif lorsqu'on utilise le clavier :

.ui-menu-item-wrapper:hover,
.ui-widget-content .ui-state-active {
  background-color: whitesmoke;
  color: blueviolet;
}

Réponse 2 / 2

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
19 août 2022 à 16:57

Salut Pitet,

C'est exactement ce que je cherchais !
Je te remercie beaucoup...

Où puis-je trouver cette information, car j'ai regardé la doc jQuery sur autocomplete et je n'ai pas réussi à trouver ?

Pitet
19 août 2022 à 17:43

Le widget autocomplete dépend du widget menu pour afficher les résultats :

https://api.jqueryui.com/menu/#theming

Quelques infos à ce sujet dans le documentation concernant le theming :

https://learn.jquery.com/jquery-ui/theming/

https://api.jqueryui.com/theming/css-framework/

Tu peux aussi utiliser l'Inspecteur dans les outils des développements de ton navigateur pour voir le code css appliqué par défaut sur l'élément actif. Ce style est défini dans le code source de jquery ui : https://github.com/jquery/jquery-ui/blob/main/themes/base/theme.css

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > Pitet
19 août 2022 à 18:16

Merci pour toutes ces infos très riches... J'avais bien essayé F12 dans chrome mais je ne parvenais pas cliquer en même temps sur mon input et afficher l'inspecteur et la zone correspondante... Je vais aller faire un peu de lecture, ce sera plus simple ;-)

Discussions similaires

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne

indice et exposant en css ?