Javascript Girl
  1. Javascript Girl
  3. Styling JQuery UI Autocomplete
Intereting Posts
Obtenez des résultats uniques de JSON array en utilisant jQuery Créer un objet à partir d'une chaîne dans JavasScript ECMAScript 6 Que font les opérateurs << et >>? Déclaration des contrôleurs dans AngularJS Obtenez si le navigateur est occupé Comment obtenir la ligne vaxis dans le diagramme des colonnes du graphique google api? Confus sur les liaisons prototypes, cette déclaration Javascript Submit n'inclut pas Submit Button Value InnerHTML n'écrit pas dans un groupe svg Firefox et IE Quand une fonction n'est-elle pas une fonction? Comment sélectionner une ligne dans la base de données Jquery Tronnez une chaîne parfaitement adaptée à une largeur de pixel donnée En utilisant Javascript avec Underscore.js pour trier l'autre sens Comment ajouter des boutons personnalisés à JqGrid add / edit forms? Comment faire de l'arrière-plan modifier progressivement les couleurs?

Styling JQuery UI Autocomplete

Violon

J'essaie de classer les sections dans l'Autocomplet, mais je ne sais pas quoi mettre dans le CSS pour les sections. J'essaie spécifiquement de faire: 

color: #96f226; border-radius: 0px; border: 1px solid #454545;

Aucune suggestion???

Vous recherchez ce sélecteur? 

 .ui-menu .ui-menu-item a{ background:red; height:10px; font-size:8px; }

Démo Ugly:

http://jsfiddle.net/zeSTc/

Remplacez-le simplement par votre code: 

 .ui-menu .ui-menu-item a{ color: #96f226; border-radius: 0px; border: 1px solid #454545; }

Démo: http://jsfiddle.net/w5Dt2/

Bootstrap style pour jQuery UI Autocomplete 

  .ui-autocomplete { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; display: none; min-width: 160px; padding: 4px 0; margin: 0 0 10px 25px; list-style: none; background-color: #ffffff; border-color: #ccc; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } .ui-menu-item > a.ui-corner-all { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #555555; white-space: nowrap; text-decoration: none; } .ui-state-hover, .ui-state-active { color: #ffffff; text-decoration: none; background-color: #0088cc; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background-image: none; }

Vous pouvez écraser les classes dans votre propre css en utilisant! Important, par exemple si vous voulez vous débarrasser des coins arrondis. 

 .ui-corner-all { border-radius: 0px !important; }