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

Download on GitHub <1 kb minified

Compatible with Safari, Firefox, Chome, Opera and IE7+

How to use

HTML

  1. <!--Insert after jQuery-->
  2. <script src='js/customSelect.jquery.js'></script>

Javscript

  1. $(document).ready(function(){
  2.     $('.mySelectBoxClass').customSelect();
  3.     /* -OR- set a custom class name for the stylable element */
  4.     $('.mySelectBoxClass').customSelect({customClass:'myOwnClassName'});
  5. });

CSS

  1. .customSelect {
  2. /* This is the default class that is used */
  3. /* Put whatever custom styles you want here */
  4. }
  5.  
  6. .customSelect.customSelectHover {
  7. /* Styles for when the select box is hovered */
  8. }
  9.  
  10. .customSelect.customSelectOpen {
  11. /* Styles for when the select box is open */
  12. }
  13.  
  14. .customSelect.customSelectFocus {
  15. /* Styles for when the select box is in focus */
  16. }
  17.  
  18. .customSelectInner {
  19. /* You can style the inner box too */
  20. }