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, though.

Desktop:

iOS devices:

Essentially I need the two date and time inputs to fill ~50% of the width. This is the html and css I'm using:

<div class="arriveWrapper">             <div class="arriveDateWrapper fieldWrapper">                 <input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" />             </div>             <div class="arriveTimeWrapper fieldWrapper">                 <input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" />             </div>             <div class="clear"></div>         </div>   .arriveDateWrapper {     width: 49%;     margin-right: 2%;     float: left;     position: relative; }          .arriveDate {             width: 100%;             height: 28px;             -moz-box-sizing: border-box;             -webkit-box-sizing: border-box;             box-sizing: border-box;         }  .arriveTimeWrapper {     width: 49%;     float: left; }      .arriveTime {         width: 100%;         height: 28px;         -moz-box-sizing: border-box;         -webkit-box-sizing: border-box;         box-sizing: border-box;     } 

If anyone can tell me how to get the placeholders to show up when using the native date/time pickers that would be great, as well.

Thanks!

Answer 1

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

Answer 2

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; }