Select2

Basic Usage

Select Optgroup

Multi-select boxes

Placeholder

For single selects only set a blank <option> first

For multi-selects, you must not have an empty <option> element

Labels

Click this to highlight the single select element

Click this to highlight the multiple select element

Documentation

Files: styles, scripts

HTML

<h3>Basic Usage</h3>
<label>
	<select class="select_basic_single">
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
	</select>
</label>
		
<h3>Select Optgroup</h3>
<label>
	<select class="select_optgroup">
		<option value="notary" class="option_level_1">Notary public</option>
		<option value="notarization" class="option_level_2">Notarization</option>
		<option value="verifying" class="option_level_3">Verifying Identities</option>
		<option value="travel" class="option_level_3">Travel Authorization Letter</option>
		<option value="transfer" class="option_level_3">Transfer of Vehicle Ownership</option>
		<option value="declaration" class="option_level_3">Declaration of Custodianship</option>
		<option value="legalization" class="option_level_2">Legalization</option>
		<option value="authentication" class="option_level_3">Authentication and legalization</option>
		<option value="family" class="option_level_1">Family law</option>
		<option value="divorce" class="option_level_2">Divorce and Separation</option>
		<option value="cohabitation" class="option_level_2">Cohabitation and Common-Law</option>
		<option value="litigation" class="option_level_2">Litigation</option>
		<option value="accounting" class="option_level_1">Accounting</option>
		<option value="immigration" class="option_level_1">Immigration</option>
		<option value="employment" class="option_level_1">Employment</option>
	</select>
</label>

<h3>Multi-select boxes</h3>
<label>
	<select class="select_basic_multiple" name="states[]" multiple="multiple">
		<optgroup label="Mountain Time Zone">
			<option value="AZ">Arizona</option>
			<option value="CO">Colorado</option>
			<option value="ID">Idaho</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NM">New Mexico</option>
			<option value="ND">North Dakota</option>
			<option value="UT">Utah</option>
			<option value="WY">Wyoming</option>
		</optgroup>
	</select>
</label>

<h3>Placeholder</h3>
<p>For single selects only set a blank <option> first</p>
<label>
	<select class="select_placeholder_single">
		<option value=""></option>
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
	</select>
</label>

<p>For multi-selects, you must not have an empty <option> element</p>
<label>
	<select class="select_placeholder_multiple" multiple="multiple">
		<option value=""></option>
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
	</select>
</label>

<h3>Labels</h3>
<label for="selectLabelSingle">
	Click this to highlight the single select element
	<select class="select_basic_single" id="selectLabelSingle">
		<optgroup label="Eastern Time Zone">
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="IN">Indiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="OH">Ohio</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WV">West Virginia</option>
		</optgroup>
	</select>
</label>

<label for="selectLabelMultiple">
	Click this to highlight the multiple select element
	<select class="select_basic_multiple" id="selectLabelMultiple" multiple="multiple">
		<optgroup label="Eastern Time Zone">
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="IN">Indiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="OH">Ohio</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WV">West Virginia</option>
		</optgroup>
	</select>
</label>

CSS

.select_basic_single{width:100%}
.select_basic_multiple{width:100%}
.select_placeholder_single{width:100%}
.select_placeholder_multiple{width:100%}

/* Select Optgroup */
.select2-container{margin:0 0 1.5rem;width:100%!important}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#09a5be}
.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#09a5be;border:.1rem solid #09a5be;color:#fff}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{border-right:.1rem solid #fff;color:#fff}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#066978;color:#fff}

.select_optgroup{width:100%}
.option_level_1{font-weight:600}
.option_level_2,.option_level_3{display:inline-block;position:relative}
.option_level_2{padding:0 0 0 2.5rem}
.option_level_3{padding:0 0 0 3.7rem}
.option_level_2::before,.option_level_3::before{position:absolute;top:0;left:0}
.option_level_2::before{content:'- -'}
.option_level_3::before{content:'- - -'}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{background-color:#066978;color:#fff}
}

SCSS

/* Vars */
$main:            #09a5be;
$dark:            #066978;
$white:           #ffffff;

.select_basic_single {width: 100%;}
.select_basic_multiple {width: 100%;}
.select_placeholder_single {width: 100%;}
.select_placeholder_multiple {width: 100%;}
.select2-container {margin:0 0 1.5rem; width: 100% !important;}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: $main;}
.select2-container--default .select2-selection--multiple .select2-selection__choice {background-color: $main;border: .1rem solid $main;color: $white;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {border-right: .1rem solid #ffffff;color: #ffffff;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {background-color: $dark;color: $white;}

/* Select Optgroup */
.select_optgroup {width: 100%;}
.option_level_1 {font-weight: 600;}
.option_level_2, .option_level_3 {display: inline-block;position: relative}
.option_level_2 {padding: 0 0 0 2.5rem}
.option_level_3 {padding: 0 0 0 3.7rem}
.option_level_2::before, .option_level_3::before {position: absolute;top: 0;left: 0;}
.option_level_2::before {content: '- -';}
.option_level_3::before {content: '- - -';}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {background-color: $dark;color: $white;}
}

JavaScript

$(".select_basic_single").select2({
	width: 'resolve'
});

$('.select_optgroup').select2({
	templateResult: function (data) {
		if (!data.element) {
			return data.text;
		}
		
		var $element = $(data.element);
		
		var $wrapper = $('<span></span>');
		$wrapper.addClass($element[0].className);
		
		$wrapper.text(data.text);
		
		return $wrapper;
	}
});

$('.select_basic_multiple').select2({
	width: 'resolve'
});

$('.select_placeholder_single').select2({
	placeholder: "Select a state",
	allowClear: true
});

$(".select_placeholder_multiple").select2({
	placeholder: "Select a state"
});