How to Change the CSS of Color of Select2 Tags

How to change the css of color of select2 tags?

First up - a warning that this means you are overriding the CSS that is internal to select2, so if select2 code changes at a later date, you will also have to change your code. There is no formatChoiceCSS method at the moment (though it would be useful).

To change the default color, you will have to override the various CSS properties of the tag which has this CSS class:

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

To change the class of each tag based on the text or option # of that tag, you will have to add a change event:

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

And you can define a custom background-color etc in this class:

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

select2 - color tag based on selection order

I suggest to use selection templating, so you can customize the appearance of selected results by using the templateSelection configuration option.

In your case you can operate on container parameter of templateSelection function like below:

templateSelection: function (data, container) {
$(container).css("background-color", colors[data.id]);
return data.text;
}

Here is a complete snippet coloring selected tags based on their id:

var colors = ["red", "blue", "green", "orange", "yellow"];
$(document).ready(function() { var checkList = [1, 3]; $("#myList").select2({ width: "100%", templateSelection: function (data, container) { $(container).css("background-color", colors[data.id]); return data.text; }, }).val(checkList).trigger("change");})
.select2-selection__choice {  color: white;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<div class="container"> <select multiple="multiple" id="myList"> <option value="1">Apple</option> <option value="2">Mango</option> <option value="3">Orange</option> </select></div>

Set a different color for each tag

Ok, I found a way to do this:

data = function(){
return [{id:1, text:"tag 1", color:"#555555"}, {id:2, text:"tag 2", color:"#336699"}]
},

formatSelectionCssClass = function(tag, container) {
$(container).parent().css({ "background-color": tag.color });
};

How to change the background of each select2 option?

Adding background colors to the <option> elements inside your <select> isn't working because those elements end up hidden. Select2 hides the original <select>, then generates its own elements to produce a styled "fake" select control which mirrors the value of the hidden "real" one.

Notice the "aria-hidden" attribute on the select element

Since select2 doesn't provide an API for passing color values to individual options, you'll need to try either using nth-child() selectors in CSS or some extra javascript to style the fake option elements that select2 creates. Here's a question from 2018 with answers demonstrating each approach.

How to change font color of select2 control using css

Here's a list of classes you need to use for styling select2 input:

/* Input field */
.select2-selection__rendered { }

/* Around the search field */
.select2-search { }

/* Search field */
.select2-search input { }

/* Each result */
.select2-results { }

/* Higlighted (hover) result */
.select2-results__option--highlighted { }

/* Selected option */
.select2-results__option[aria-selected=true] { }

If you want you can play around in this JSBin I've created, so you can test things out.

I've updated my JSBin, in it you can see how you can style a specific select2 list (instead of globally adding styles)

How do I change the colour of all select2 elements in a specific row

Your issue is in this line:

$('#TB2 tbody tr').find("select").data("select2").......

The .data("select2") returns only the first value and not an array of elements for which you want to change the background color.

You can use .each() to iterate on each select tag.

$('#TB2 tbody tr').find("select").each(function(idx, ele) {
$(ele).data("select2").$container.find('.select2-selection')
.css("background-color", "rgb(10,10,10)");
});

The snippet:

$('select').select2({    placeholder: "Select",    allowClear: true});$('#TB2 tbody tr').find("select").each(function(idx, ele) {   $(ele).data("select2").$container.find('.select2-selection')           .css("background-color", "rgb(10,10,10)");});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<table width="100%" class="table table-striped table-bordered table-hover" id="TB2"> <thead> <tr> <th>Name</th> <th>Type of Student</th> <th>Thesis/ Project/ Research</th> </tr> </thead> <tbody> <tr class="table_row"> <td><input class="form-control alert-danger" type="text" name="a"/></td> <td><select class="form-control alert-danger""> <option value="">Type</option> <option>Bachelors</option> <option>Masters</option> <option>Doctoral</option> <option>Postdoctoral</option> </select></td> <td><select class="form-control"> <option value="">Select</option> <option>Thesis</option> <option>Project</option> <option>Research</option> </select></td> </tr> </tbody></table>

Select2 Library: change the background color of the selected item

Finally I find the solution... need to override the following class:

/* Selected option */
.select2-results__option[aria-selected=true] { }

for example:

.select2-results__option[aria-selected=true] {
color: #ffffff;
background-color: #9f998d;
}

Im sure I try before, but maybe I make a mistake.

Hope this answer can help others... thanks StackOverflow!!!

How to use different colors for each select2 option?

Got it.

Select2 generates an id attribute for all the dropdown options, using the parent select's name attribute.

With my example, I was able to apply a colour using :nth-child(x) as follow:

.select2-results__options[id*="select2-fruits"] .select2-results__option:nth-child(1) {
color: red;
}
.select2-results__options[id*="select2-fruits"] .select2-results__option:nth-child(2) {
color: green;
}
.select2-results__options[id*="select2-fruits"] .select2-results__option:nth-child(3) {
color: blue;
}
<select class="select2" name="fruit">
<option class="red-option">Apple</option>
<option class="green-option">Kiwi</option>
<option class="blue-option">Grape</option>
</select>


Related Topics



Leave a reply



Submit