# Custom Select Box CSS Style Plugin: jQuery + CSS
## Getting started
### [See Basic Demo](http://jsfiddle.net/adamco/hysHB/)
### Initiate the plugin
```javascript
$(document).ready(function(){
$('#someSelectBox').customSelect();
});
```
### Style using CSS however you like
```CSS
.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
* [Example making use of the different states/classes](http://jsfiddle.net/adamco/7ttWj/)
## Cookbook
### Trigger an update on the select box
Useful if any modifications are made to the select box after customSelect() has been applied
```javascript
$('#someSelectBox').customSelect();
// as an example....
$('#someSelectBox').width(500).append('');
// Trigger an refresh on the select box. Good as new!
$('#someSelectBox').trigger('update');
```
### 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](https://github.com/paulirish/matchMedia.js) for better browser support. The `addListener` extension makes it very easy to update the customSelect:
```javascript
// 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('update');
});
```
## Options
There are a few extra options if you need them
```javascript
$('#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.4.1 (26/05/2013)
* Fixed multiple `customSelectOpen` handling in FF
* `Esc` & `Enter` key support
Version 0.4.0 (26/04/2013)
* Some optimizations for better compression/minification
* If you specify a `customClass`, that classname will be used for all states.
* eg. `{customClass:'mySexySelect'}` will produce class names like `mySexySelectOpen`, `mySexySelectFocus`, `mySexySelectHover`
* The only exception is the `hasCustomSelect` class, which will maintain the plugin's default namespace since it is applied to the select box to distinguish it from an unstyled select.
Version 0.3.7 (26/04/2013)
* Support for `disabled` `