Wie ändere ich die CSS Farbe von select2 Tags?

Question

Ich habe gerade begonnen Projekt zu verwenden, um mehrere Tags aus einer Auswahlbox anzuzeigen, und es funktioniert großartig, danke für die Bibliothek.

Ich muss nur die Farbe oder CSS der Tags in mehrwertigen Auswahlboxen ändern. Momentan wird die Farbe des Tags als grau angezeigt und ich möchte dies je nach Typ des Tags in eine andere Farbe ändern. Oder gibt es zumindest eine Möglichkeit, die Standardfarbe zu ändern?

Ist es auch möglich, die CSS-Klasse von Tags zu ändern? Es gibt eine Option wie formatResultCssClass, aber wenn ich versuchte, CSS-Klassen durch diese Eigenschaft hinzuzufügen, änderte sich nichts, würde ich mich freuen, wenn jemand ein Beispiel zeigen könnte, wie man das macht?

Bearbeiten: Problemumgehung zum Beheben des Problems: Fügen Sie eine neue Eigenschaft zu dem select2.defaults für das Darstellen von Klassen ausgewählter Objekte hinzu.

$.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; 
... 

und initialisieren select2 diese neue Eigenschaft mit:

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

Answer 1

First up - eine Warnung, dass dies bedeutet, dass Sie die CSS überschreiben, die select2 intern ist, so dass, wenn select2 Code-Änderungen zu einem späteren Zeitpunkt , müssen Sie auch Ihren Code ändern. Im Moment gibt es keine Methode formatChoiceCSS (obwohl es nützlich wäre).

Um die Standardfarbe zu ändern, wo sich die einzelnen CSS-Eigenschaften des Tags, die diese CSS-Klasse hat außer Kraft setzen müssen:

.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; 
} 

Um die Klasse eines jeden Tag basierend auf dem Text oder Option # von ändern dass Tag, werden Sie ein Änderungsereignis hinzufügen:

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

Und Sie können in dieser Klasse eine benutzerdefinierte Hintergrund-Farbe usw. definieren:

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

Answer 2

Verwenden Sie die formatResultCssClass, containerCssClass und dropdownCssClass Optionen Klassen in Code angeben, die adaptContainerCssClass und adaptDropdownCssClass Optionen Klassen in Markup angeben, oder auch die containerCss und dropdownCss Optionen Inline-Stil in Code angeben.

Wenn Sie sich wundern, warum Sie diese nie verwendet haben, sie weren't properly documented vor einer Weile.

Referenz: < http://ivaynberg.github.io/select2/>

Answer 3

Für die Formatierungs-Tags können Sie die Funktion formatSelectionCssClass verwenden.

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

Oder Sie könnten eine CSS-Klasse auf der Grundlage der Option ID:

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

Denken Sie daran, dass Sie beide Filter und background_color in Ihrem CSS-Klasse

Answer 4

Sie den Zugriff außer Kraft setzen müssen Tag Container wie folgt:

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

Answer 5

Für diejenigen, die nur die Farbe ändern möchten Einige der select2-Felder:

Anstatt die Select2-CSS-Eigenschaften von select2-choice direkt zu ändern, verwenden Sie die von select2 generierte ID für das select2-div (dies ist # s2id_yourelementid), um die untergeordneten Elemente auszuwählen, die select2-choice enthalten. Wahlklasse.

Zum Beispiel, wenn ich ein Element, #myelement ändern möchten, dass ich mich bewerben Select2, dann die Farbe zu ändern, würde ich folgendes zu meinem CSS hinzufügen:

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

Answer 6

In meinem Fall habe ich benötigt, um den Unterschied zwischen Tags, die "ausgewählt" wurden und denen, die hinzugefügt wurden.

Die Hilfe hier war für die früheren Versionen von select2, und nicht von großem Nutzen. Mit der aktuellen 4.0-Version (mit seiner furchtbar spärlichen Dokumentation) konnte ich dies mit den Template-Funktionen und etwas "Cleverness" erreichen.

Der erste Schritt ist die Vorlage der Ergebnisse (es sollte beachtet werden, dass bei jeder Auswahl oder Entfernung Aktion für jede Auswahl in der Box ausgelöst wird). Dies gibt normalerweise nur den Text zurück, der in die resultierende LI eingehen wird ... aber wir wollen diesen Text in eine Spanne einwickeln (und S2 sagen, dass wir die HTML nicht durch Zurückgeben eines Objekts entfernen) mit einer benutzerdefinierten CSS-Klasse für unseren Typ. In meinem Beispiel verwende ich die selected Eigenschaft, dies zu bestimmen:

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

Ihre resultierende HTML nach einem Element ist, sollte in etwa so gewählt sein:

<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> 

Aber das ist nicht genug, wie wir brauchen um auf den Eltern-LI zuzugreifen, nicht auf das Span-Kind. Und da CSS keine übergeordneten Selektoren zulässt, müssen wir einige jQuery ausführen, um dies zu ermöglichen. Da diese neu gezeichnet werden wir diese Funktion auf beiden select und remove Ereignisse des Select2 Artikel ausgeführt werden soll:

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

Schließlich ergibt:

<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> 

Und damit Sie Ihre Elemente basierend auf Stil auf den CSS-Klassen im_writein_item und im_connected_item.

Answer 7

Addiert man diese CSS arbeitet für mich:

.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; 
} 

Beispiel Fiddle:

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

(ja, ich ging mit den Farben verrückt zu meinem Punkt zeigen ;-))