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…

s3Slider jQuery Plugin & Tutorial

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …

jQuery Optimization: Avoid Unnecessary Selector

Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary…

Fading Links Using jQuery: dwFadingLinks

Earlier this month, we posted a MooTools script that faded links to and from a color during the mous…

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…