Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

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:

.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!

Problem courtesy of: jdehlin

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

Solution courtesy of: wandarkaf

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×