Gerren Design

Hey, welcome to

Gerren Design

. This is the personal website of yours truly,

Gerren Rabideau

. Im an

Illustrator

,

Coder

, and all around

uber-geek

. This is my little corner of the internet; I use it to showcase my

illustration artwork

and my

web design

portfolio. By day I work full time as a

web designer

making the internet look better one page at a time, but by night I like to

paint

.

What do I paint you ask?
Mostly,

watercolor fantasy and sci-fi illustrations

, but I also dabble in editorial and digital work as well. Plus, I also keep a blog of whatever else I decide to write about;

comic books, traveling, color theory, how much IE sucks

, etc...

How to make custom Select Boxes

With Jquery and the Select tag

Making forms look good is often one of the most challenging parts of being a web designer. Select boxes specifically are very difficult. They look completely different in different browsers. Lucky, there are plenty of ways to replace them with hidden input fields. However, recently I've had to deal with 3rd party custom tags that generate dynamic select boxes. The only way to style these is by allowing them to load and then use the DOM to manipulate or replace them. I couldn't find any example of his online, so I was forced to figure out how to do it myself. I hope the code below will help someone else out.

Sample:

The code:

Update

8-4-2009

I've made a few improvements to the script based on user feed back and created a demo that you can now download;

Download the Jquery Select Box Demo

Comments



Ouu thank you for sharing this information :))) I search it from so long and finally I found it :))

Nice way to dress your select boxes!.
Note: your code isn`t 100% compatible with IE6 (selectbox height/padding problem) and IE7 (select items not on top, disappear under your div with the code)

Great script, maybe you could also do a short tutorial how to use it, tried it, but didn't work for me.

Hey!

If I put something after the select box, as in some text, it is automatically put on the line under the select box.

I have a tooltip I want to go right after the select box, but now it is moved to the line before?

I absolutely LOVE the select box, it is great!

Thanks for the help!

thanks for the great script. just what i am looking for.

a couple of things though ...

if i put a couple of them on the page (one above the other) and open up the top one, i can see the arrow from the bottom select box (coz its z-index is set to 10000). is there a way to correct for this?

also, how would you adapt it to contain an auto scrollbar for long lists (like when putting all the US states in as select options - it tends to expand my page height a bit).

thanks again!

after the line you change the hidden select box's value:

$(curSel).val(myTarA);

if you add

$(curSel).change();

you allow the onchange condition to be active

Good One..Its really helpful...
Cheers,

Good One..Its really helpful...
Cheers,

Superb Code. Thx!

Stumbled into this site by chance but I’m sure glad I clicked on that link. You definitely answered all the questions I’ve been dying to answer for some time now. Will definitely come back for more of this. Thank you so much

Leave a comment


So really, you have three options here. You can login into facebook to leave a comment (it's like internet black magic), you can sign in using another third party like yahoo, google, etc., or you can simpley enter a name and email below to keep things easy.