input type=date in iOS 7

Question

I have developed a mobile web application and I noticed a change concerning iOS 7, specifically:

• If a web page form contains an input tag of type=date, and the value of the date field is empty (no date value), then the field is rendered in a strange way in Safari, so that the height of the text box is very small (approximately 25% of the height of a normal input type=text box). Once a date is entered into the control, then the height of the text box is the same as a type=text box.

This did not happen in iOS 6 but is happening in iOS 7. The problem is that it does not look good to me to see these date input boxes rendered in this way. I would prefer that they look the same as a normal type=text box even when empty.

• Is there anything I can do to get that to happen?
• Is there some initial value I can pass to the type=date text boxes to make them render as they always have?

Thanks in advance.

updated with screenshots:

good:

bad:

(that white box should be taller and showing placeholder text)

Answer 1

As suggested above, the solution is to manually set the height of the input type=date html control. A height of 20px for me makes it appear to be the same as the other controls on the page and it looks good.