Question

I’m working on a mobile version of a website and I really wanted to use the HTML5 input field types number, email and tel. When I do this both Android and iOS show the keyboards I want them to when the user has those fields selected, but in Android the CSS attributes for the fields are ignored now that I changed it from type="text", specifically the CSS width attribute.

I updated my CSS file to make sure the values for input[type="text"] also applied to input[type="email"] etc.. and this works great on iOS. Is there some trick to get the Android browser to pick up CSS attributes on the new HTML5 input field types?

I’m testing on a Droid X running Android 2.2 with the default Android browser.

Answer 1

The problem is probably that the CSS parser does not recognize the selector and skips it. Try setting an id on it. And applying the CSS to the id.

==EXAMPLE==

<input type="email" name="email" id="foo" />

CSS:

input#foo
{
    width: 100%; //OR WHATEVER
}