Native looking HTML selector with Android/iPhone Webkit?

Question

Looking at Google Calendar on my android web browser I noticed the time selector looks like a native Android selector as opposed to looking like an HTML selector drop-down. To see it:

• go to http://calendar.google.com/
• Touch the plus button at the top right
• Touch the time drop-down

You should see the native-looking selector.

What HTML incantation are they using to get that look?

Are there other android specific or HTML5 specific tags to get native (or improved) look on Android/iPhone webkit (and WebView)?

Answer 1

I am not as familiar with Android, but I do know that there are a number of special CSS attributes that one can use with WebKit on the iPhone. Essentially they are any CSS attribute beginning with -webkit, which indicates that they are CSS attributes which have not yet been standardized. It is a normal part of the standards process, where potential standard tags and attributes must be implemented in a "test case" to show how they would work. There are a number of sites that have a full list of the -webkit attributes. I like this one the best. Many of these attributes provide more advanced layout capabilities, which can help items look more "native."

Answer 2

The time selector is a regular <select> tag on the iPhone version.

The date selector is a completely custom calendar picker that Google has created from scratch.