web-dev-qa-db-fra.com

Comment styliser jquery choisi

J'utilise jQuery choisi pour mon multi-select boîte. Cependant, je trouve les styles prédéfinis dans chosen.css le fichier est un peu difficile à écraser, ce qui élimine totalement chosen.css pourrait également ne pas être une très bonne option.

Voici mon violon: https://jsfiddle.net/k1Lr0342/

HTML:

<select class="chosen" multiple="true" style="height: 34px; width: 280px">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>

css:

.chosen-choices {
    border-radius: 3px;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
    border: none;
    height: 34px !important;
    cursor: text;
    margin-top: 12px;
    padding-left: 15px;
    border-bottom: 1px solid #ddd;
    width: 285px;
    text-indent: 0;
    margin-left: 30px;
  }

J'ai essayé d'écrire directement le css pour .chosen-choicesul. Certaines œuvres comme border-radius et box-shadow. Mais d'autres: margin, height, padding, border, etc. sont écrasés par chosen.css fichier. Une option consiste à mettre !important pour chaque paramètre qui ne fonctionne pas. Cela fonctionnera pour la plupart des trucs mais toujours pas la hauteur. Des pensées?

jquerycssjquery-chosen
11
Lance Shi

CSS acceptera le style qui utilise un sélecteur plus spécifié.

.chosen-container-multi .chosen-choices {
    /*blah blah*/
}

.chosen-choices {
    /* less specificity, this style might not work  */
}

Violon de travail

8
blurfx

Essayez d'utiliser jQuery, voici le fonctionnement JSFIDDLE 

$(".chosen-choices li").css("background","red");
1
Shoeb Mirza

Si vous regardez .chosen-choices dans Choisi.css, vous trouverez que la hauteur est auto!important. Supprimez (ou commentez) ces !important et ça devrait aller.

Vous pouvez utiliser l'inspecteur d'éléments de votre navigateur pour vérifier le CSS appliqué. J'utilise personnellement Chrome outils de développement à chaque fois. Sauvez-moi beaucoup de tracas

0
Joshua H

Un peu tard mais j'ai pensé que je répondrais depuis que je suis tombé sur ça. Étant donné que les éléments choisis que vous voyez sont basés sur le menu de sélection qu'il cache, vous devez trouver l'élément dans le div immédiatement après (créé par choisi) et le styliser. Vous pouvez le faire avec Jquery en supposant que vous savez que c'est de la valeur.

$('.your-select-menu').next().find('.search-choice').each(function() {
  if ($(this).text() === someValue) {
    $(this).css("border-color", "#00b300");
  }
})

Résultats dans ce
enter image description here

0
Bryan