Demo

How to use

Add reference to jQuery library to your page (I'm using this one).
Add reference to wwselect.css to <head> section (<link rel="Stylesheet" type="text/css" href="wwselect.css" />).
Note that css requires 2 images for arrows that can be found in archive. Don't forget to update urls in css if you move them to another directory.
Add reference to wwselect.min.js (<script type="text/javascript" src="wwselect.min.js"></script>).
Init plugin code.
$(window).load(function(){ {$("select").wwselect(); }); - to update all selects on the page
$(window).load(function(){ {$("#example2").wwselect(options); }); - to update all single select with some options
Take a look at demo page source for more details.

Setting name	Description	Example
width	Indicates maximum width of generated select. When this value is exceeded option text will be minified.	Any number greater then 0. $(<selector>).wwselect({ width: 100 });
height	Indicates maximum height of generated list of options. When this value is exceeded vertical scroll will appear.	Any number greater then 0. $(<selector>).wwselect({ height: 100 });

Download page

See demo.html for more details.

!!! Note: Some browsers may have invalid gradient and rounded corners handling!!!

Like this article?