Home

Awesome

Custom Select Box CSS Style Plugin: jQuery + CSS

Getting started

See Basic Demo

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 */
}

More Examples

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

Changelog

Version 0.5.1 (19/03/2013)

Version 0.5.0 (19/03/2013)

Version 0.4.1 (26/05/2013)

Version 0.4.0 (26/04/2013)

Version 0.3.7 (26/04/2013)

Version 0.3.6 (16/04/2013)

Version 0.3.5 (16/04/2013)

Version 0.3.4 (15/04/2013)

Version 0.3.3 (04/03/2013)

Version 0.3.2 (28/02/2013)

Version 0.3.0 (12/02/2013)

Version 0.2.5 (04/02/2013)

Version 0.2.4 (03/02/2013)

Version 0.2.3 (30/01/2013)

Version 0.2.1 (17/12/2012)

Version 0.2.0

CHANGES IN 0.2.0

Copyright 2013 Adam Coulombe

Dual licensed under the MIT and GPL licenses:

This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box.