Selects

The template form plugin provides a replacement style for selects, for a uniform styling accross browsers and platforms. To use it, just add the class select to any select element:

First value Second value Selected value Last value

<select class="select">
	...
</select>

Select are focusable, and work with keyboard shortcuts too: up and down arrows to navigate in the values list, enter to select, type any text to scroll to the first matching value. On touch devices, the default UI is used (unless it is disabled with an option - see reference below for more details)

As most form elements, selects can be disabled, either by disabling the original select or by adding the class disabled.

First value Second value Selected value Last value

// Disabled
<select class="select" disabled>
	...
</select>

// Looks like disabled
<select class="select disabled">
	...
</select>

Note that if you need to disable/enabled selects at runtime, you must use the template methods:

// Enable select
$(selector).enableInput();

// Disable select
$(selector).disableInput();

Search feature

Since v1.3, the select can embed a serach field that display over the selected value when the select opens. By default, it is automatically used if the select has more than 40 values, and you can control when to show it using the following options: searchField, searchIfMoreThan and searchText (see reference below for more details).

USA United Kingdom Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Congo, The Democratic Republic of The Cook Islands Costa Rica Cote D'ivoire Croatia Cuba Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands (Malvinas) Faroe Islands Fiji Finland France French Guiana French Polynesia French Southern Territories Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guinea Guinea-bissau Guyana Haiti Heard Island and Mcdonald Islands Holy See (Vatican City State) Honduras Hong Kong Hungary Iceland India Indonesia Iran, Islamic Republic of Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Korea, Democratic People's Republic of Korea, Republic of Kuwait Kyrgyzstan Lao People's Democratic Republic Latvia Lebanon Lesotho Liberia Libyan Arab Jamahiriya Liechtenstein Lithuania Luxembourg Macao Macedonia, The Former Yugoslav Republic of Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia, Federated States of Moldova, Republic of Monaco Mongolia Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Islands Norway Oman Pakistan Palau Palestinian Territory, Occupied Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Reunion Romania Russian Federation Rwanda Saint Helena Saint Kitts and Nevis Saint Lucia Saint Pierre and Miquelon Saint Vincent and The Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia and Montenegro Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Georgia and The South Sandwich Islands Spain Sri Lanka Sudan Suriname Svalbard and Jan Mayen Swaziland Sweden Switzerland Syrian Arab Republic Taiwan, Province of China Tajikistan Tanzania, United Republic of Thailand Timor-leste Togo Tokelau Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Turks and Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States United States Minor Outlying Islands Uruguay Uzbekistan Vanuatu Venezuela Viet Nam Virgin Islands, British Virgin Islands, U.S. Wallis and Futuna Western Sahara Yemen Zambia Zimbabwe

Dynamic changes

If you change the value of the select with javascript, you need to tell the styling plugin that it has changed: just fire a change event:

$(selector).change();

And if you change the option's list, trigger the corresponding special event to force a refresh:

$(selector).trigger('update-select-list');

Both events can be chained if both options list and value have changed:

$(selector).trigger('update-select-list').change();

Option classes

Colors

As any other element, selects can use the 9 color sets:

First value Second value Selected value Last value First value Second value Selected value Last value First value Second value Selected value Last value

Open on hover

By default, selects open when the user clicks the down arrow, but they may also open on hover: just add the class auto-open.

First value Second value Open on hover Last value

<select class="select auto-open">
	...
</select>

Expandable list

On the default select style, the list has the same width as the whole select, but if you want the list to expand (for long texts) add the class expandable-list.

First very long value Second value even longer than the first one Expand Last value

<select class="select expandable-list" style="width:100px">
	...
</select>

Setting a width prevents the original select from streching to match the longest value.

Check list

This is an alternative style, great for short lists, and it is more touch-friendly:

First value Second value Selected value Last value

<select class="select check-list">
	...
</select>

Multiple selects

Default style

Multiple selects look like this:

First value Second value Selected value Last value

<select class="select" multiple>
	...
</select>

Check-list style:

First value Second value Selected value Last value

<select class="select check-list" multiple>
	...
</select>

You may control the number of visible elements using the size attribute.

Easy multiple selection

Multiple selects work like standard multiple selects, holding Ctrl or Cmd to select several values. To make it easier for users to select multiple values, add the class easy-multiple-selection, and the selection can be done only by clicking (note that this is the default behavior on touch devices)

First value Second value Selected value Last value

<select class="select easy-multiple-selection check-list" multiple>
	...
</select>

By default, easy multiple selection does not allow to un-select all values, but this may be enabled using the class allow-empty

First value Second value Selected value Last value

<select class="select easy-multiple-selection allow-empty check-list" multiple>
	...
</select>

Force styles

It is possible to display a multiple select as a drop-down using the classmultiple-as-single, here with some of the above options:

First value Second value Selected value Last value

<select class="select multiple-as-single easy-multiple-selection check-list" multiple>
	...
</select>

On the oposite, single-value selects can be displayed as multiple using the class multiple (but still allow only one value)

First value Second value Selected value Last value

<select class="select multiple check-list">
	...
</select>

Using the style only

It is possible to use the drop-down style without any underlying select element: just build the corresponding markup, and the plugin will handle it as well:

<span class="select" tabindex="0">
	<a href="#" class="select-value">Edit</a>
	<span class="select-arrow"></span>
	<span class="drop-down">
		<a href="#">Option 1</a>
		<a href="#">Option 2</a>
		<a href="#">Option 3</a>
		<a href="#">Option 4</a>
	</span>
</span>

The tabindex attribute is used to make the element focusable

Note that most styling options will work as well.

Options reference

The defaults may be modified at runtime in $.fn.styleSelect.defaults, and options may be passed inline using the data-select-options attribute

styledList

False to use system's drop-down UI, true to use style's drop-downs
Type: boolean|null
Default: true

styledOnTouch

For touch devices: false to use system's drop-down UI, true to use style's drop-downs, or null to guess (true for check-list style, false for others)
Note: only works if styledList is true
Type: boolean|null
Default: null

openOnKeyDown

When focused, should the arrow down key open the drop-down or just scroll values?
Type: boolean
Default: true

noValueText

Text for multiple select with no value selected
Type: string
Default: ''

singleValueText

Text for multiple select with one value selected, or false to just display the selected value
Type: string|boolean
Default: false

multipleValuesText

Text for multiple select with multiple values selected, or false to just display the selected list
Tip: use %d as a placeholder for the number of values
Type: string|boolean
Default: '%d selected'

allValuesText

Text for multiple select with all values selected, or false to just display the selected list
Tip: use %d as a placeholder for the number of values
Type: string|boolean
Default: 'All'

searchField

Enable search field when open - use null to automatically use when list has more than searchIfMoreThan elements
Type: boolean|null
Default: null

searchIfMoreThan

Minimum number of elements to trigger a search field, if searchField is null
Type: int
Default: 40

searchText

Helper text for seach field
Type: string
Default: 'Search'