Is it possible to create a custom dropdown box using JavaScript and CSS?
For this, I need to place a background image for the dropdown box using JavaScript.
Give any suggestions without using jQuery.
- It's possible, but you will have a tough time making the form elements accessible to screen readers.. FYI– Marcy SuttonCommentedFeb 13, 2011 at 23:11
- yes it is see my answer below– neel upadhyayCommentedJun 27, 2023 at 8:22
Add a comment |
3 Answers
You can check out jQTransform
answered May 7, 2009 at 12:34
Here is a good tutorial on creating custom drop-down.
JQTransform (as suggested by Olafur) is sufficient for me. But if you need more control such as adding icons, it's worth looking at the tutorial.
This might be overkill; but SproutCore gives you input elements composed from images instead of from native HTML elements. There are probably other frameworks that do similar things.
The basic idea is to create a div or something, as CrazyJugglerDrummer suggests, and put click handlers on it. The handlers set up animation to mimic a select element. And when one of your pseudo-select items is selected, you use JavaScript to send that value to an actual select or input element that is hidden.
