Use an image instead of unopened <select>?

I wonder if it's possible to just use CSS and JS to use a custom image of a dropdown in place of the actual <select> element - while it's in its initial, unopened state?

When it's clicked, it would just show the regular <select> dropdown choices, perhaps underneath that above-mentioned image ...

I searched aro开发者_开发技巧und this forum and the web in general and couldn't find anything closely related. I didn't even find any jQuery solutions for this idea.

Would appreciate some help. Thanks!

You can certainly display an image and substitute a <select> in its place onclick. What you can't do is programmatically open the select box, or ‘recycle’ the click that took place on the image. So you would have to click once to have the image replaced and then again to actually open the select—not much use.

You are probably better off using one of the many scripts and plugins that completely replaces on-page <select> elements with a bunch of more stylable divs.

HTML

<img src='somImage.jpg' id='replace'/>
<select>
...
</select>

JS

$('#replace').click(function(){
    $(this).hide();
    $(this).next().show();
})

Fiddle: http://jsfiddle.net/maniator/KyFgy/

Have a look at this. I think you will like it