CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3jquery-select2
foob.ar
foob.ar

Reputation: 485

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.

Upvotes: 13

Views: 23394

Answers (4)

You Old Fool
You Old Fool

Reputation: 22959

Here is a very simple and generic approach to adding a class to select2 options:

$('.select2').select2({
    // render html in the dropdown
    templateResult: function(el) { return '<span class="' + ($(el.element).prop('class') || '') + '">' + el.text + '</span>'; },
    // render html for the selected option
    templateSelection: function(el) { return '<span class="' + ($(el.element).prop('class') || '') + '">' + el.text + '</span>'; },
    // render html as-is without escaping it
    escapeMarkup: function(markup) { return markup; }
});

This way the select2 options will inherit any class you add to your options.

Upvotes: 1

foob.ar
foob.ar

Reputation: 485

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>

Upvotes: 5

unloco
unloco

Reputation: 7320

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>

Upvotes: 15

Martin D.
Martin D.

Reputation: 2110

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>

Upvotes: 2

Related Questions