web-dev-qa-db-fra.com

Comment changer le css de couleur de select2 tags?

Je viens juste de commencer à utiliser project pour afficher plusieurs balises dans une zone de sélection et cela fonctionne très bien, merci pour la bibliothèque.

J'ai juste besoin de modifier la couleur ou le css des balises affichées dans les sélections à valeurs multiples. En ce moment, la couleur de la balise est affichée en gris et je voudrais changer cela en une autre couleur en fonction du type de balise. Ou au moins, y a-t-il un moyen de changer la couleur par défaut?

Est-il également possible de changer la classe de balises css? Il y a une option telle que formatResultCssClass mais quand j'ai essayé d'ajouter des classes css via cette propriété, rien n'a changé, j'apprécierais que quelqu'un puisse montrer un exemple, comment faire cela?

Edition: Solution de contournement pour résoudre le problème: Ajoutez une nouvelle propriété à la propriété select2.defaults pour représenter les classes d'objets sélectionnés.

$.fn.select2.defaults = {
...
    selectedTagClass: "",
...
}

addSelectedChoice: function (data) {
        var choice=$(
            "<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
            "    <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
            "</li>"),
        id = this.id(data),
        val = this.getVal(),
        formatted;
...

Et initialisez select2 en utilisant cette nouvelle propriété:

$(".#select2Input").select2({placeholder: "Please Select Country", 
                    selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements
                    formatNoMatches: function () { return "There isn't any country similar to entered query"; }
                });
csstwitter-bootstrapjquery-select2jquery-select2-4
14
cubbuk

First up - un avertissement indiquant que cela signifie que vous substituez le code CSS interne à select2. Ainsi, si le code select2 change à une date ultérieure, vous devrez également modifier votre code . Il n'y a pas de méthode formatChoiceCSS pour le moment (bien que ce soit utile).

Pour changer la couleur par défaut, vous devrez remplacer les différentes propriétés CSS de la balise qui possède cette classe CSS:

.select2-search-choice {
    background-color: #56a600;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    color: #333;
    border: 1px solid #aaaaaa;
}

Pour changer la classe de chaque balise en fonction du texte ou de l'option # de cette balise, vous devrez ajouter un événement change:

$("#select2_element").on("change", function(e) { 
      if (e.added) {
          // You can add other filters here like
          // if e.val == option_x_of_interest or
          // if e.added.text == some_text_of_interest
          // Then add a custom CSS class my-custom-css to the <li> added
          $('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
      }
});

Et vous pouvez définir une couleur de fond personnalisée, etc. dans cette classe:

li.my-custom-css {
       background-color: // etc etc
}
7
mccannf

Pour formater les balises, vous pouvez utiliser la fonction formatSelectionCssClass.

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});

Ou vous pouvez ajouter une classe CSS basée sur l'ID de l'option:

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return data.id; },
});

N'oubliez pas que vous devrez remplacer les filtres et background_color dans votre classe css

18
trgt

Dans mon cas, je devais montrer la différence entre les balises "sélectionnées" et celles qui étaient ajoutées.

L'aide ici était pour les versions précédentes de select2, et de peu d'utilisation. En utilisant la version 4.0 actuelle (avec sa documentation terriblement rare), j'ai été capable d'y parvenir en utilisant les fonctions de modèle et un peu d'habileté.

La première étape consiste à modéliser les résultats (il convient de noter que chaque action de sélection ou de suppression est déclenchée pour chaque sélection de la zone). Cela retourne normalement JUST le texte qui ira dans le LI résultant ... mais nous voulons envelopper le texte dans une étendue (et dire à S2 de ne pas effacer le code HTML en renvoyant un objet) avec une classe CSS personnalisée pour notre type. Dans mon exemple, j'utilise la propriété selected pour déterminer ceci:

$('.select2_sortable').select2({
    tags: true,
    templateSelection: function(selection) {
        if(selection.selected) {
            return $.parseHTML('<span class="im_selected">' + selection.text + '</span>');
        }
        else {
            return $.parseHTML('<span class="im_writein">' + selection.text + '</span>');
        }
    }
});

Le code HTML résultant après la sélection d’un élément devrait ressembler à ceci:

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

Mais cela ne suffit pas, car nous devons accéder au parent LI, pas à l’envergure. Et comme CSS n’autorise pas les sélecteurs de parents, nous devons exécuter jQuery pour que cela se produise. Comme ils sont redessinés, nous voudrons exécuter cette fonction à la fois sur les événements select et remove de l'élément Select2:

$('.select2_sortable').on("select2:select", function (ev) {
    updateSelectedParents();
});
$('.select2_sortable').on("select2:removed", function (ev) {
    updateSelectedParents();
});

function updateSelectedParents() {
    $('.im_selected').closest('li').addClass('im_connected_item');
    $('.im_writein').closest('li').addClass('im_writein_item');
}

Résultat final:

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice im_connected_item" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice im_writein_item" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

Et vous permettant de styliser vos éléments en fonction des classes CSS im_writein_item et im_connected_item.

3
Denny

Utilisez les options formatResultCssClass, containerCssClass et dropdownCssClass pour spécifier les classes dans le code, les options adaptContainerCssClass et adaptDropdownCssClass pour spécifier les classes dans le balisage ou même les options containerCss et dropdownCss pour spécifier le style incorporé dans le code.

_ {Si vous vous demandez pourquoi vous ne les avez jamais utilisés, ils n'ont pas été correctement documentés il y a quelque temps.}

Référence : < http://ivaynberg.github.io/select2/ >

1
tne

Vous pouvez accéder au conteneur de balises comme ceci:

formatSelectionCssClass = function(tag, container) {
    $(container).parent().addClass("my-css-class");
};
1
Leo

Pour ceux qui veulent seulement changer la couleur de certaines des cases select2:

Au lieu de modifier directement les propriétés Select2 CSS de select2-choice, utilisez l'ID généré par select2 pour la div select2 (il s'agit de # s2id_yourelementid) pour sélectionner ses enfants portant la classe select2-choice.

Par exemple, si je veux modifier un élément, #myelement, auquel j'applique Select2, puis pour changer la couleur, j'ajouterais ce qui suit à mon css: 

#s2id_myelement > .select2-choice{
     background-color:blue;
}
1
ManGI1

Ajouter ce CSS a fonctionné pour moi: 

.select2-selection__choice {
  background-color: red !important;
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0);
  background-image: -webkit-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -moz-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -o-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -ms-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  color: white !important;
  border: 1px solid #aaaaaa !important;
}

Exemple de violon:

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

(oui je suis devenu fou avec les couleurs pour démontrer mon point ;-))

0
Sajjan Sarkar