Android browser ignoring CSS on HTML5 input tags

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.

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
}