Jak zmienić wartość css koloru znaczników select2?

Question

Właśnie zacząłem używać projektu do wyświetlania wielu znaczników z pola wyboru i działa świetnie, dzięki za bibliotekę.

Po prostu potrzebuję zmodyfikować kolor lub css znaczników wyświetlanych w wieloczęściowych polach wyboru. Obecnie kolor tagu jest szary i chciałbym go zmienić na inny kolor zgodnie z typem tagu. A przynajmniej czy istnieje sposób na zmianę domyślnego koloru?

Czy jest również możliwa zmiana klasy znaczników css? Istnieje opcja taka jak formatResultCssClass, ale gdy spróbowałem dodać klasy css przez tę właściwość nic się nie zmieniło, byłbym wdzięczny, gdyby ktoś mógł pokazać przykład jak to zrobić?

Edycja: Obejście problemu: Dodaj nową właściwość do select2.defaults do reprezentowania klas wybranych obiektów.

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

i zainicjować select2 stosując tę ​​nową właściwość:

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

Najpierw - ostrzeżenie, że oznacza to, że są nadrzędne CSS, który znajduje się wewnątrz Select2, więc jeśli wybierz 2 zmiany kodu w późniejszym terminie , będziesz musiał również zmienić swój kod. W tej chwili nie ma metody (choć byłoby to przydatne).

Aby zmienić domyślny kolor, trzeba będzie zastąpić różne właściwości CSS znacznika, który ma tę klasę 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; 
} 

Aby zmienić klasę każdego znacznika w oparciu o tekst lub opcji # dnia że znacznik, będzie trzeba dodać zdarzenie 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'); 
     } 
}); 

I można zdefiniować niestandardowe tło kolorów itp w tej klasie:

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

Answer 2

Użyj formatResultCssClass, containerCssClass i dropdownCssClass opcji do określenia klas w kodzie, opcje adaptContainerCssClass i adaptDropdownCssClass określić zajęcia w znacznikach, albo nawet opcje containerCss i dropdownCss określić styl inline w kodzie.

Jeśli zastanawiasz się, dlaczego nigdy ich nie użyłeś, oni już dawno temu.

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

Answer 3

do formatowania tagów można użyć formatSelectionCssClass funkcyjnych.

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

Albo można dodać klasę css na podstawie identyfikatora opcję:

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

pamiętać, że trzeba będzie zastąpić zarówno filtr i BACKGROUND_COLOR w swojej klasie css

Answer 4

można uzyskać dostęp do taki kontener:

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

Answer 5

Dla tych, którzy chcą zmienić kolor niektórych z pól select2:

Zamiast bezpośrednio modyfikować właściwości Select2 CSS bezpośrednio w select2-choice, należy użyć identyfikatora wygenerowanego przez select2 dla div select2 (będzie to # s2id_yourelementid) w celu wybrania jego dzieci niosących select2- klasa wyboru.

Na przykład, jeśli chcesz zmodyfikować element, #myelement, że mogę ubiegać select2 się, a następnie, aby zmienić kolor, chciałbym dodać następujące do mojego CSS:

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

Answer 6

W moim przypadku potrzebne, aby pokazać różnicę między tagami, które zostały "wybrane" i tymi, które zostały dodane.

Pomoc była dla poprzednich wersji select2 i nie miała dużego zastosowania. Korzystając z aktualnej wersji 4.0 (z jej strasznie rzadką dokumentacją) udało mi się to osiągnąć za pomocą funkcji szablonu i odrobiny "sprytu".

Pierwszym krokiem jest zestrojenie wyników (należy zauważyć, że przy każdej operacji wybierania lub usuwania jest ona uruchamiana dla każdego zaznaczenia w polu). Zwykle zwracany jest TYLKO tekst, który przejdzie w wynikowym LI ... jednak chcemy zawinąć ten tekst w span (i powiedzieć S2, aby nie usuwać HTMLa przez zwracanie obiektu) z niestandardową klasą CSS dla naszego typu. W moim przykładzie używam właściwość selected aby określić następująco:

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

Twój wynikające HTML po wybraniu elementu powinno być coś takiego:

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

Ale to nie wystarczy, ponieważ musimy aby uzyskać dostęp do rodzica LI, a nie do dziecka span. A ponieważ CSS nie pozwala na selektory nadrzędne, musimy uruchomić jQuery, aby to się stało. Ponieważ są to odświeżana będziemy chcieli, aby uruchomić tę funkcję na obu select i remove wydarzeń pozycji 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'); 
} 

Ostatecznie w wyniku:

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

i pozwala projektować swoje elementy oparte na klasach CSS im_writein_item i .

Answer 7

dodanie tego CSS pracował dla mnie:

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

przykład Fiddle:

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

(tak oszaleli kolorach wykazać mój punkt ;-))