'How to use different colors for each select2 option?
I'm using a select2 dropdown, and would like to set different colours on each options.
Example:
<select class="select2" name="fruit">
<option class="red-option">Apple</option>
<option class="green-option">Kiwi</option>
<option class="blue-option">Grape</option>
</select>
I can colourize the rendered, selected option as follow:
.select2-selection__rendered[title="Apple"] {
color: red !important;
}
How to also colourize the options in the select2 dropdown - either based on the option class ('red-option') or value ('Apple')?
PS: I use bootstrap 3.3 + jQuery and don't mind using JS to do this if I must.
Solution 1:[1]
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>
Solution 2:[2]
I found a better solution using the options
function formatState(state) {
const option = $(state.element);
const color = option.data("color");
if (!color) {
return state.text;
}
return $(`<span style="color: ${color}">${state.text}</span>`);
};
jQuery(node).select2({
templateResult: formatState,
templateSelection: formatState,
});
The color comes from the html data attribute in my case
<option style="color: #F00" data-color="#F00" value="1">Red Option</option>
Solution 3:[3]
You can use the CSS attribute selector like so on select2-results__option elements:
$(".select2").select2();
.select2-selection__rendered[title="Apple"] {
color: red !important;
}
.select2-results__option[id*="Apple"] {
color: red;
}
select {
width: 200px;
}
<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.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="select2" name="fruit">
<option class="red-option">Apple</option>
<option class="green-option">Kiwi</option>
<option class="blue-option">Grape</option>
</select>
Solution 4:[4]
Here is a very simple and generic approach to adding a class to select2 options:
$('.select2').select2({
templateResult: function(option) { return $('<span class="' + ($(option.element).prop('class') || '') + '">' + option.text + '</span>'); },
templateSelection: function(option) { return $('<span class="' + ($(option.element).prop('class') || '') + '">' + option.text + '</span>'); },
});
This way the select2 options will inherit any class you add to your options.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | corn on the cob |
Solution 2 | unloco |
Solution 3 | Martin D. |
Solution 4 | Eaten by a Grue |