Building a styled select list that still uses iOS functionality

Question

It's pretty easy to style a text input and have it work right in iOS. By right I mean the onscreen keyboard will still open up as expected and the Previous|Next buttons still let you tab between inputs.

Most prettified select lists out there seem to replace an actual ... with other elements to get a nice look. This works in iOS but if you are Previous|Nexting through a bunch of inputs it won't act as expected.

Is it possible to style a select list so that it will work like a plain but look like something you'd get from Dropkick JS or another library (or build yourself)? I considered trying to hide a real select behind an element but I don't think I can make the list open up correctly with javascript.

Solution

You can alter practically any of the form controls in iOS. Here's a great demo: http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
I'm a big fan of the formalize library, which is going to apply styles you may not like, but you can always change them; it's a great library to learn from: http://formalize.me

Comments

[bkwdesign]

select.mySelect{ -webkit-appearance: none; } works wonders for me! Thanks S.O. for the great 37signals link