Comment modifier le css de la couleur de select2 tags?

J'ai juste commencé à l'aide de projet pour montrer plusieurs balises à partir d'une boîte de sélection et il fonctionne très bien, merci pour la bibliothèque.

J'ai juste besoin de modifier la couleur ou le css des balises montré en multi-valeur sélectionnez-boîtes. Droit maintenant la couleur de l'étiquette est affichée en gris et je voudrais changer que pour certaines autres couleurs selon le type de la balise. Ou au moins est-il un moyen de changer la couleur par défaut?

Aussi est-il possible de changer la classe css des balises? Il y a une option comme formatResultCssClass mais quand j'ai essayé d'ajouter des classes css grâce à cette propriété, rien n'a changé, je vous serais reconnaissant si quelqu'un peut montrer un exemple de comment faire cela?

Edit: solution de Contournement pour résoudre le problème:
Ajouter une nouvelle propriété à la select2.les valeurs par défaut pour la représentation des 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 initialiser select2 à l'aide de 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"; }
                });

OriginalL'auteur cubbuk | 2013-01-15

D'abord - un avertissement que cela signifie que vous écrasez le CSS qui est interne à select2, donc si select2 modifications de code à une date ultérieure, vous permettra également de modifier votre code. Il n'y a pas de formatChoiceCSS méthode à l'instant (même si ce serait utile).

Pour modifier la couleur par défaut, vous devrez remplacer les différentes propriétés CSS de la balise qui a 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;
}

De changer la classe de chaque balise sur la base du texte ou de l'option n ° de cette balise, vous devez ajouter un événement de changement:

$("#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 votre propre couleur d'arrière-plan, etc dans cette classe:

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

J'ai fait quelque chose de similaire à ce fait =) j'ai ajouté une propriété pour la formatChoiceCSS le code et j'ai utilisé cette propriété pour ajouter de nouvelles classes css et supprimé les propriétés de choisir 2-recherche-choix. Merci pour la réponse
l'esprit à partager? 😀
J'ai mis à jour la question, merci.
Si l'on ajoute css sur la balise spécifique sur la condition de bases que vous avez répondu, alors, si nous supprimer toutes les balises puis le css a également supprimé à partir de l'étiquette.

OriginalL'auteur mccannf

18

Pour la mise en forme des balises que vous pouvez utiliser la fonction formatSelectionCssClass.
```
$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});
```
Ou vous pouvez ajouter une classe css en fonction de l'option id:
```
$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return data.id; },
});
```
N'oubliez pas que vous aurez besoin de remplacer le filtre et la background_color dans votre classe css

C'est la bonne réponse, basée sur les mises à jour de la documentation. Merci.
Quelles mises à jour? Je ne peux pas trouver une seule référence à l' formatSelectionCssClass dans les docs officielles.
Cela ne marche pas , voici un violon: jsfiddle.net/sajjansarkar/o3eem7s0/1 u peut poster un exemple?

OriginalL'auteur trgt

Dans mon cas, j'avais besoin de montrer la différence entre les balises qui ont été "sélectionnés" et ceux qui ont été ajoutées.

L'aide était ici pour les versions précédentes de select2, et pas d'une grande utilité. Utilisant la version 4.0 (avec son terriblement rare documentation) j'ai été en mesure d'atteindre cet objectif en utilisant le modèle des fonctions et un peu de 'l'intelligence'.

Première étape est de modèle les résultats (il convient de noter que, sur chaque de sélectionner ou de supprimer cette action est déclenché pour chaque sélection dans la boîte). Cela renvoie normalement JUSTE le texte qui va aller dans la LI... mais nous voulons nous envelopper ce texte dans un span (et dites-S2 de ne pas arracher le HTML par le renvoi d'un objet) avec une CSS personnalisée classe pour notre type. Dans mon exemple, j'utilise le selected propriété de le déterminer:

$('.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>');
        }
    }
});

Votre code HTML obtenu après sélection d'un élément doit être quelque chose comme 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 ce n'est pas suffisant, car nous avons besoin d'accéder à la mère de LI, pas la portée de l'enfant. Et depuis CSS ne permet pas de parent sélecteurs, nous avons à exécuter certains jQuery pour y arriver. Parce que ce sont redessinées, nous voulons exécuter cette fonction sur le select et remove événements de la Select2 élément:

$('.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');
}

Qui a finalement abouti à:

<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 vous le style de vos éléments basés sur le im_writein_item et im_connected_item classes CSS.

OriginalL'auteur Denny

1

Utiliser le formatResultCssClass, containerCssClass et dropdownCssClass options pour spécifier les classes dans le code, le adaptContainerCssClass et adaptDropdownCssClass options pour spécifier les classes dans le balisage, ou même la containerCss et dropdownCss options pour spécifier de style en ligne dans le code.

Si vous vous demandez pourquoi vous n'avez jamais utilisé ces, ils n'étaient pas correctement documentés il y a un moment.

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

OriginalL'auteur tne

Vous pouvez accéder à la balise conteneur comme ceci:

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

parent() est ce que j'étais en manque!

OriginalL'auteur Leo

1

Pour ceux qui veulent changer la couleur de certains des select2 boîtes:

Au lieu de modifier directement le Select2 propriétés CSS de choisir 2-choix directement, utilisez l'IDENTIFIANT généré par select2 pour la select2 div (#s2id_yourelementid) pour sélectionner ses enfants porteurs de la select2-choix de la classe.

Par exemple, si je veux modifier un élément, #myelement, que j'applique Select2, puis de modifier la couleur, je voudrais ajouter ce qui suit à mon css:
```
#s2id_myelement > .select2-choice{
     background-color:blue;
} 
```
OriginalL'auteur ManGI1

L'ajout de cette 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 fou avec les couleurs pour démontrer mon point de vue 😉 )

OriginalL'auteur Sajjan Sarkar

Vous devez vous connecter pour publier un commentaire.