Default Skin

Below is the built-in default skin for light and dark.

Selected Hover Color Variant

A select box with custom color for highlighting or selecting a selection.

Source Code

$('#select2').select2({
  dropdownCssClass: 'hover-success',
  minimumResultsForSearch: Infinity // disabling search
});

Class Reference

Class	Value
dropdownCssClass: 'hover-[value]'	success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Outline Color Variant

A select box with colored border and optional colored border and hover for dropdown.

Source Code

$('#select2').select2({
  containerCssClass: 'select2-outline-success',
  dropdownCssClass: 'bd-success hover-success',
  minimumResultsForSearch: Infinity // disabling search
});

Class Reference

Class	Value
containerCssClass: 'select2-outline-success' dropdownCssClass: 'bd-success hover-success'	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | white

Full Colored Variant

A select box with full colored variants to choose from.

Source Code

$('#select2').select2({
  containerCssClass: 'select2-full-color select2-primary',
  minimumResultsForSearch: Infinity // disabling search
});

Class Reference

Class	Value
containerCssClass: 'select2-full-color select2-[value]'	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Full Colored Dropdown Variant

A select box with full colored dropdown variants to choose from.

Source Code

$('#select2').select2({
  dropdownCssClass: 'select2-drop-color select2-drop-primary',
  minimumResultsForSearch: Infinity // disabling search
});

Class Reference

Class	Value
dropdownCssClass: 'select2-drop-color select2-drop-[value]'	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Full Colored Box and Dropdown Combination

A select box with full colored dropdown variants to choose from.

Source Code

$('#select2').select2({
  containerCssClass: 'select2-full-color select2-primary',
  dropdownCssClass: 'select2-drop-color select2-drop-primary',
  minimumResultsForSearch: Infinity // disabling search
});