CODEWITHSUNDEEP
htmlcssw3c
w.brian
w.brian

Reputation: 17397

HTML 5: <select>-like behavior on mobile devices using <ul> dropdown

Tapping a <select> element on most mobile browsers brings up a touch-friendly menu of options to choose from instead of the pointer-friendly dropdown you typically see on desktop/laptop browsers. This would make <select> ideal to use as navigation menus instead the often-implemented <ul> dropdowns. The problem is, no amount of CSS can produce a totally customized looking <select> on a desktop browser.

Is it possible to achieve the same behavior as a <select> element a on mobile browser using a <ul> dropdown without too much hackiness?

If not, how would one go about proposing some solution to this problem to a standards body?

Upvotes: 2

Views: 2984

Answers (1)

mash
mash

Reputation: 15229

You could possibly do the following:

Detect mobile device (based on size, using WURFL, or other tools). If mobile device, hide the standard ul dropdowns, change to selects. If you don't like the look of the selects, you can do something like this:

select {
    -webkit-appearance: none;
    background: url(some_nav_image.png) #ddd;
}​

jsfiddle example: http://jsfiddle.net/h9UyZ/

To be quite honest, if styled correctly, these could even just be used for the main website as well as the mobile, and work nicely in all cases.

Upvotes: 2

Related Questions