Set width of native html5 date and time pickers on iOS devices
Solution 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
Solution 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;
}
Related videos on Youtube
jdehlin
Lead Application Developer for WVU Health Sciences ITS
Updated on September 26, 2022Comments
-
jdehlin over 1 year
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!
-
David Nguyen about 11 yearspost the rest of the structure
-
jdehlin about 11 yearsI've added more of the structure. Is there a way to set the width of these inputs?
-