Style JQuery UI Autocomplete

Violon

Je suis en train de style les sections à l'intérieur de la saisie semi-automatique, mais je ne sais pas quoi mettre dans le CSS pour les sections. Je suis précisément en essayant de faire:

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

Des suggestions???

  • Que voulez-vous dire? Vous n'êtes pas sûr sélecteur CSS à utiliser?
InformationsquelleAutor Joe Pigott | 2013-07-24
  1. 83

    Vous êtes à la recherche pour ce sélecteur?:

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

    Laid démo:

    http://jsfiddle.net/zeSTc/

    Il suffit de remplacer avec votre code:

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

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

    • Oui!!! Ici est le programme fini, j'ai été demander à la plupart de mes questions sur. MERCI!
    • pour jquery-ui 1.12.1 Essayer : .ui-menu-item div.ui-state-active{//your styling here}
    InformationsquelleAutor daniel__
  2. 63

    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;
}
    • Lors de l'utilisation de ce avec une entrée de champ dans la barre de navigation, la largeur est d'abord plus large que le "searchbox". Paramètre "top: 0" résolu pour moi.
    • il est exactement comme je le voulais!
    • Sauf si vous n'avez pas l'esprit d'une liste qui s'étend à jamais, je voudrais jeter un max-height: 50vh et un overflow-y: auto sur il y
    • Remarque, ce n'est pas limité à une utilisation avec bootstrap. Il utilise le jQuery & jQuery3 classes
    • Je me demandais si il existe un moyen pour attribuer un code html id de la liste de sorte que vous pouvez le style de plusieurs listes différemment si sur la même page.
    InformationsquelleAutor Md. Nazrul Islam
  3. 0

    Basé sur @md-nazrul islam réponse, C'est ce que j'ai fait avec SCSS:

    ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//@include border-radius(5px);
@include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
@include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}
    InformationsquelleAutor gordie
  4. -4

    Vous pouvez écraser les classes dans votre propre feuille de style css à l'aide !important, par exemple, si vous voulez vous débarrasser des coins arrondis.

    .ui-corner-all
{
border-radius: 0px !important;
}
    • Deux remarques: Vous n'avez pas besoin de définir une unité après 0. 0 est toujours 0. Deuxièmement, le réglage de !important n'est pas considéré comme un bon style de codage. Vous aurez probablement courir dans une cascade où !l'important est unintendendly d'écraser vos styles plus tard.
    InformationsquelleAutor Oliver E.