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.
March 20th, 2008 at 11:02 am
[...] A more simplified version of this script is available here ... [...]
September 17th, 2008 at 10:56 am
Doesn't really seem to work in Opera 9.5, apart from the text color: any ideas?
December 4th, 2008 at 12:13 pm
Hi, nice code - does the job I need. How do I load the select box with the selected options text in by default? E.g.;
One
Two
etc..
I need it to show "Two" when the page loads. Any ideas?
Cheers
James
December 4th, 2008 at 1:49 pm
It's ok, I figured it out, just needed to change;
this.options[0].innerHTML
to
this.options[this.selectedIndex].innerHTML
February 20th, 2009 at 2:58 am
I tested this in mozilla and it fails to work also tested in IE6 again fails to work, what does it work in? I see only a basic select drop no skin or anything.
Sorry but it seems to not realy be very compatable in my opin ...
Might want to look into that.
April 22nd, 2009 at 8:55 am
to make it work in chrome and safari, change the .click to .change. That sorted it for me.
May 21st, 2009 at 9:52 am
its simple and easy code. its so usefull
May 21st, 2009 at 9:53 am
itssssssssssssssss great !!!!!!!!!!!!!!!!
May 21st, 2009 at 1:50 pm
I was looking at the code to use on my website.
Well i have three select boxes with different width.
How to use the script with three different image widths.
some help appreciated.
September 19th, 2009 at 5:24 am
Nice code. I used:
$(function() {
$('select').wrap('');
});
...in my jQuery init to apply it to all selects in my site.
September 19th, 2009 at 5:25 am
Nice code... I used:
$(function() {
$('select').wrap('');
});
...in my jQuery init to apply it to all select elements in my site.
September 19th, 2009 at 5:26 am
Nice code... I used:
$(function() {
$('select').wrap('<div class="my-skinnable-select"></div>');
});
...in my jQuery init to apply it to all select elements in my site.