You could probably do it with the select element as well. It would take some extra special tweaking though. Instead of an input like there is now, it would have to just be a div or something. When JavaScript is loaded, it would make a UL out of the select element, but keep both it and the select hidden. Then when you click the div, it would show the UL like it does now, and when an list item is clicked, it would set the text of the div to show the choice AND change the value of the hidden select element. A bit more complicated but doable and probably a better choice in fallback scenarios.

Wonderful effect, I always thought I would need to tweak an option field to acheive this styling. In mobile sites this should prove to be a valuable UX addition. On the other hand, I would recommend adding the unselectable=”on” property to the input.

If you test this on IE 7/8, you’ll get the blinking cursor even underneath the list, and adding that property makes sure it goes away.

I am not able to create two simultaneous styledropdown with different set of values on same page..
Could you please provide me the working example for this?
Also the code for two styledropdrown mentioned above in the comments is not working

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.