CSS pour autocomplete
Résolu
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
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
- Autocomplete css
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
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;
}
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
