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

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

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

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

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