CSS pour autocomplete
Résolu
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
2 réponses
-
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 ?
-
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
-
@Pitet
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 ;-)
-
-
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; }
