Set width of native html5 date and time pickers on iOS devices

Question

I\'m using the native date and time pickers with type=date and type=time for the mobile version of a website I\'m working on. The input fields are not respecting the css I have,

Answer 1

To avoid losing any style elements applied to other input boxes, use textfield instead of none.

.arriveDate, .arriveTime  {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

Also, if you just want to make all the date fields appear like textboxes but still work like date fields...

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

Answer 2

Just add this to your styles

.arriveDate, .arriveTime  {
  -webkit-appearance: none;
  -moz-appearance: none;
}

The reason behind this is that IOS device render by default the inputs using the IOS buttons