iOS safari messes up input type=date

Question

I'm using HTML 5's <input type="date" />. Works fine in different browsers, BUT there is always the one who messes everything up:

The problem hereby is the size of the field: Using Bootstrap v3.2 for the design, these inputs are in a form and have class="form-control" which should make them wider (as the text input above and the select below).

Is there a way to say iOS that the datepicker should be 100% wide? style="width:100%" does nothing. width:1000px works indeed, width:100% !important does nothing.

Thanks for the help!

Answer 1

This fixes all my date fields on IOS.

input[type="date"]
{
    display:block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em;
}

Answer 2

This is the way iOS treats input type="date". I wouldn't worry about native styling. It may look off, but people using iOS are used to it.

You can use min-width:95% on the date input. It makes it fit, at least in iOS 8, and doesn't change the appearance otherwise. Though I haven't tested in Android or earlier version of iOS. Alternatively, to just center it, you can add .center-block to the input, so at least it's center and doesn't look so off.

DEMO: http://jsbin.com/civor/1/

.input-min-width-95p {min-width:95%;}

HTML:

<input type="date" class="form-control input-min-width-95p" ...