Come cambiare il css di colore dei tag select2?

Question

Ho appena iniziato a utilizzare il progetto per mostrare più tag da una casella di selezione e funziona benissimo, grazie per la libreria.

Ho solo bisogno di modificare il colore o il css dei tag visualizzati nelle caselle di selezione multi-valore. In questo momento il colore del tag è mostrato in grigio e vorrei cambiarlo con un altro colore in base al tipo di tag. O almeno c'è un modo per cambiare il colore predefinito?

Inoltre è possibile modificare la classe css dei tag? C'è un'opzione come formatResultCssClass ma quando ho provato ad aggiungere classi css attraverso quella proprietà non è cambiato nulla, sarei grato se qualcuno possa mostrare un esempio su come farlo?

Modifica: soluzione alternativa per risolvere il problema: Aggiungere una nuova proprietà a select2.defaults per rappresentare le classi di oggetti selezionati.

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

e inizializzare select2 utilizzando questa nuova proprietà:

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

Il primo - un avvertimento che questo significa che stai sovrascrivendo il CSS che è interno a select2, quindi se Select2 modifiche al codice in un secondo momento , dovrai anche cambiare il codice. Al momento non esiste il metodo formatChoiceCSS (anche se sarebbe utile).

Per cambiare il colore predefinito, sarà necessario sostituire le varie proprietà CSS del tag che ha questa 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; 
} 

cambiare la classe di ogni tag in base al testo o l'opzione ° quel tag, si dovrà aggiungere un evento di modifica:

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

e si può definire un'etc personalizzato background-color in questa classe:

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

Answer 2

Utilizzare i formatResultCssClass, containerCssClass e dropdownCssClass opzioni per specificare le classi nel codice, le opzioni adaptContainerCssClass e adaptDropdownCssClass per specificare le classi nel markup, o anche le opzioni containerCss e dropdownCss specificare stile in linea nel codice.

Se ti stai chiedendo perché non li hai mai usati, sono un po 'di tempo fa weren't properly documented.

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

Answer 3

Per formattare i tag è possibile utilizzare la funzione formatSelectionCssClass.

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

Oppure si potrebbe aggiungere una classe CSS in base all'opzione ID:

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

Ricordate che è necessario eseguire l'override sia del filtro e background_color nella tua classe CSS

Answer 4

È possibile accedere al contenitore tag come questo:

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

Answer 5

per coloro che vogliono solo cambiare il colore di alcune delle caselle select2:

Invece di modificare direttamente le proprietà Select2 CSS di select2-choice direttamente, utilizzare l'ID generato da select2 per select2 div (questo sarà # s2id_yourelementid) per selezionare i figli che portano select2- classe di scelta.

Per esempio, se voglio modificare un elemento, #myelement, che applico Select2 a, quindi per modificare il colore, vorrei aggiungere il seguente al mio css:

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

Answer 6

Nel mio caso ho necessario per mostrare la differenza tra i tag che erano "selezionati" e quelli che venivano aggiunti.

L'aiuto qui era per le versioni precedenti di select2 e non di molto uso. Usando la versione 4.0 corrente (con la sua documentazione terribilmente sparsa) sono riuscito a ottenere ciò usando le funzioni del template e un po 'di' intelligenza '.

Il primo passaggio consiste nel creare un modello dei risultati (è necessario notare che su ogni azione di selezione o rimozione viene attivato per ogni selezione nella casella). Questo normalmente restituisce SOLO il testo che andrà nella LI risultante ... tuttavia vogliamo avvolgere quel testo in una span (e dire a S2 di non spogliare l'HTML restituendo un oggetto) con una classe CSS personalizzata per il nostro tipo. Nel mio esempio io uso la proprietà selected per determinare questo:

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

tuo HTML risultante dopo che un elemento è selezionato dovrebbe essere qualcosa di simile:

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

Ma questo non è sufficiente, come abbiamo bisogno per accedere alla LI genitore, non al bambino span. E poiché CSS non consente i selettori padre, dobbiamo eseguire alcuni jQuery per farlo accadere. Perché questi sono ridisegnate dobbiamo provare a eseguire questa funzione su entrambi i select e remove eventi della voce 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'); 
} 

Infine conseguente:

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

E che consente di acconciare i vostri elementi base nelle classi im_writein_item e im_connected_item CSS.

Answer 7

L'aggiunta di questo CSS ha lavorato per me:

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

Esempio Fiddle:

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

(sì, sono impazzito con i colori di dimostrare il mio punto ;-))