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

css, html, ios, mobile-safari

Solution

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

Problem

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!

Original source