Selectyze: Skin your own selects lists with jQuery & CSS

If you work with a web designer, sometimes, you want to kill him because he skins select lists into .psd templates.

Now, it’s possible to skin them with Selectyze plugin !!

Skin your HTML select lists easily with Selectyze plugin.

It works with IE6-9, chrome, Safari, Firefox..

HOW DOES IT WORK ?

Selectyze hides your select element, and build a div just below the select element.

Download: https://github.com/smiler/Selectyze

Demonstration:

Plugin homepage:

Implementation:

1. FIRST, INCLUDE THE CSS & JQUERY FILES

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="Selectyze.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Selectyze.jquery.min.js"></script>

2. ADD YOUR HTML

<!-- Basic / Normal HTML Select element -->
<select name="my_select" class="selectyze">
    <option>- -</option>
    <!-- Don't forget selected="selected" if you want this option selected by default -->
    <option value="value1" selected="selected">Value 1</option>
    <option value="value2">Value 2</option>
</select>

3. NOW, CALL THE SELECTYZE PLUGIN

<script type="text/javascript">
    $(document).ready(function(){
        // simple Selectyze call
        $(".selectyze").Selectyze();
        // call with options
        $(".selectyze").Selectyze({
            theme:'css3',
            effectOpen:'fade',
            effectClose:'slide'
        });
    });
</script>

Options:

theme	String	Default : ‘css3’ – Theme used. Our plugin contains css3, firefox, grey, mac and skype
effectOpen	String	Default : ‘slide’ – Effect when the list is opened
effectClose	String	Default : ‘slide’ – Effect when the list is closed
preventClose	Boolean	Default : false – Prevent closing the dropdown when is set to ‘true’

Screenshots: