Selectyze : skin your own select lists with jQuery & CSS

Kézako ?

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 hide your select element, and build a <div> just below the select element. Inside this new <div>, 2 elements are create <a> & <ul> to simulate the behaviour of a select element. Very simple !

Selectyze download package

  • Selectyze v1.1
    • jquery
      • jquery.js
      • Selectyze.jquery.js
      • Selectyze.jquery.min.js
    • css
      • Selectyze.jquery.css
      • bg_css3.png
      • bg_mac.png
      • bg_skype.png
      • bg_ff.jpg
      • bg_grey.jpg
    • index.php

Selectyze 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>

Selectyze Options

theme
String
Default : 'css3' - Theme used. Package contains css3, firefox, grey, mac, skype
effectOpen
String
Default : 'slide' - Effect when list opening.
effectClose
String
Default : 'slide' - Effect when list closing

Who use Selectyze on the web ?

If you use Selectyze Plugin into your website and you want to be added here, please contact us !
We will add you with pleasure :)

How can you help us ?

If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !