在iOS设备上设置原生HTML5date和时间select器的宽度

我正在使用types=date和types=时间的原生date和时间select器，用于我正在处理的网站的移动版本。 虽然input字段不尊重我的CSS。

桌面：

iOS设备：

基本上我需要两个date和时间input来填充〜50％的宽度。 这是我正在使用的HTML和CSS：

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

如果任何人都可以告诉我如何使用本地date/时间select器来显示占位符，那也是很棒的。

谢谢！

Answer 1

只需将其添加到您的样式

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

这背后的原因是IOS设备默认情况下使用IOSbutton呈现input

Answer 2

为避免丢失应用于其他input框的样式元素，请使用textfield而不是none 。

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

此外，如果你只是想让所有的date字段显示为像文本框，但仍然像date字段…

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