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

The other answer (involving background-color) might be correct for their circumstances, but for us, that didn't fix the issue. We ended up having to specify a height for the input. That did the trick. Definitely an annoying bug.

Answer 2

I just had the same bug on one of my websites. After investigating it looks like the bug happens on iOS7 when the CSS property background-color is set to transparent. Empty date inputs height and width are then shrinked.

So it looks like we either have to remove background-color: transparent or manually set the height and width of date inputs :(

Answer 3

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.