CODEWITHSUNDEEP
javascriptjquerycssselectdrop-down-menu
dubesor
dubesor

Reputation: 1

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 around 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!

Upvotes: 0

Views: 488

Answers (3)

bobince
bobince

Reputation: 536359

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.

Upvotes: 2

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11548

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

Upvotes: 1

Naftali
Naftali

Reputation: 146302

HTML

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

JS

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

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

Upvotes: 1

Related Questions