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.. FYIMarcy Sutton– Marcy Sutton2011-02-13 23:11:19 +00:00Commented Feb 13, 2011 at 23:11
-
yes it is see my answer belowneel upadhyay– neel upadhyay2023-06-27 08:22:43 +00:00Commented Jun 27, 2023 at 8:22
Add a comment
|
3 Answers
You can check out jQTransform
answered May 7, 2009 at 12:34
Comments
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.
Comments
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.
