lots of code take some code, share some code!

Had enough of the same old operating system based select field style? Why not skin it up, this script allows you to apply a skin to a select box.

This tutorial is based on the original code i wrote, however this version is less buggier and has support for non JS enabled browsers!

Nice and simple to install, include the jQuery library and the select skin JS file and the CSS file like so.

<style>
<!--
@import url('./css/skinned-select.css');
//-->
</style>
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery.skinned-select.js" type="text/javascript"></script>

Then just wrap a div with the class name of 'my-skinnable-select' around the select box, like so.

<div class="my-skinnable-select">
<select name="name">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>

The form variables can be posted as usual, it's as easy as that, enjoy!

Please take a look at the demo or download the code and let me know what you think by using the contact form below.

Filed under: Javascript & AJAX, Projects, Javascript, jQuery