What it be
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. This concept is based on Ryan Fait's method of styling select boxes, but as a jQuery Plugin.
Demo
You're Lookin' at it
Download
How to use
HTML
- <!--Insert after jQuery-->
- <script src='js/customSelect.jquery.js'></script>
Javscript
- $(document).ready(function(){
- $('.mySelectBoxClass').customSelect();
- /* -OR- set a custom class name for the stylable element */
- $('.mySelectBoxClass').customSelect({customClass:'myOwnClassName'});
- });
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 */
- }
- .customSelectInner {
- /* You can style the inner box too */
- }