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:

themeStringDefault : ‘css3’ – Theme used. Our plugin contains css3, firefox, grey, mac and skype
effectOpenStringDefault : ‘slide’ – Effect when the list is opened
effectCloseStringDefault : ‘slide’ – Effect when the list is closed
preventCloseBooleanDefault : false – Prevent closing the dropdown when is set to ‘true’

Screenshots:

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…

jQuery slideViewerPro: A “pro” jQuery image slider

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstandin…

jQuery Optimization: Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability …