/ Select

Lightweight unobtrusive and custom style select boxes with jQuery

Lightweight unobtrusive and custom style select boxes with jQuery

Custom Select Box CSS Style Plugin: jQuery + CSS

Lightweight, unobtrusive, custom style select boxes with jQuery.

Getting started

Initiate the plugin

$(document).ready(function(){
	$('#someSelectBox').customSelect();
});

Style using CSS however you like

.customSelect { 
/* This is the default class that is used */
/* Put whatever custom styles you want here */
}

.customSelect.customSelectHover {
/* Styles for when the select box is hovered */
}

.customSelect.customSelectOpen {
/* Styles for when the select box is open */
}

.customSelect.customSelectFocus {
/* Styles for when the select box is in focus */
}

.customSelect.customSelectDisabledOption {
/* Styles for when the selected item is a disabled one */
}

.customSelect.customSelectDisabled {
/* Styles for when the select box itself is disabled */
}

.customSelectInner {
/* You can style the inner box too */
}

Cookbook

Trigger an update on the select box

Useful if any modifications are made to the select box after customSelect() has been applied

$('#someSelectBox').customSelect();

// as an example....
$('#someSelectBox').width(500).append('<option>New!</option>');

// Trigger an refresh on the select box. Good as new!
$('#someSelectBox').trigger('render');

Making customSelect responsive

In a responsive layout, you may need to change the size / style of the select box.
The best way to do this is with matchMedia. Consider using a matchMedia polyfill for better browser support. The addListener extension makes it very easy to update the customSelect:

// add a media query listener and trigger a customSelect update whenever the query gets matched or unmatched
matchMedia('only screen and (max-width: 480px)').addListener(function(list){
    $('#mySelectBox').trigger('render');
});

Options

There are a few extra options if you need them

$('#someSelectBox').customSelect({
    customClass: "mySexySelect", // Specify a different class name (default is 'customSelect')
    mapClass:    true, // Copy any existing classes from the given select element (defaults to true)
    mapStyle:    true // Copy the value of the style attribute from the given select element (defaults to true)
});

GitHub