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.
Please note: I wrote this over 2 years ago, a french dude re-wrote this as a jQuery plugin. It's a pretty awesome implementation, go check it out!
[...] A more simplified version of this script is available here ... [...]
Doesn't really seem to work in Opera 9.5, apart from the text color: any ideas?
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
It's ok, I figured it out, just needed to change;
this.options[0].innerHTML
to
this.options[this.selectedIndex].innerHTML
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.
to make it work in chrome and safari, change the .click to .change. That sorted it for me.
its simple and easy code. its so usefull
itssssssssssssssss great !!!!!!!!!!!!!!!!
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.
Nice code. I used:
$(function() {
$('select').wrap('');
});
...in my jQuery init to apply it to all selects in my site.
Nice code... I used:
$(function() {
$('select').wrap('');
});
...in my jQuery init to apply it to all select elements in my site.
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.
Wonderful. It work.. I found the solution whole morning. Thank you much .
I have the following problem. I need to refresh (update) the skinned select with the selected value of the drop down after the form is submitted. Imagine we have page 'filter' with a drop down that is submitted to the same URL. Then the submitted page with the new "filter" value is shown however the drop down value is not updated. It updates only after clicking again the drop down. I need some kind of refresh of the innerHtml after page load. Any ideas please?
You will need to re-call the change event on the load of the page.