javascript/css replacement for <select>

Question

Yeah sorry I actually asked this question already except I dont think anyone understood what I was asking.

I am asking how to produce an html list which is styled as in this picture below: http://iforce.co.nz/i/dafjj52d.png

where by there is a custom background/button for the actual list dropdown action. I've seen this done using a jQuery with a plugin called "uniform"

What I'm asking though is does anyone know of a similar solution but that does not require a javascript framework like jQuery (which is 50kb hence why I dont want to use it just for 1 selectbox)

hopefully I'm understood correctly this time lol!

Answer 1

The styling is done through CSS, not JS. JQuery is used for shortcuts in Javascript.

There is no "replacement" happening - the tag is still there under the scene but good use of CSS is what makes it look like that image.

Answer 2

You have to use a different element. <select> can't be used because you can't style it very well using CSS, save for the background colour and font.

The best direction I can point you in is http://v2.easy-designs.net/articles/replaceSelect/ - it seems to explain how to do what you want to do pretty well.

Answer 3

It's not possible without javascript see here my question http://stackoverflow.com/questions/1895476/how-to-style-select-dropdown-with-css-only-without-javascript

And if uyou don't want to use any framework then try this

http://v2.easy-designs.net/articles/replaceSelect/

Answer 4

There is a number of drop down menu replacements out there that don't require a framework. Try Googling javascript drop down. See a fancy example here.

But consider using a framework. 20-50kb are not that much anymore in these times, it's not that much even for a dialup line. Frameworks provide a lot of little helpers for all sorts of tasks and you can link even to Google hosted versions, with the great likelihood that the user already has them cached.