我正在使用我正在处理的网站的移动版本的type = date和type = time的原生日期和时间选择器。但输入字段并不尊重我的css。
桌面:
iOS设备:
基本上我需要两个日期和时间输入来填充约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;
}
如果有人能告诉我如何在使用原生日期/时间选择器时让占位符显示出来,那也是很好的。
谢谢!
答案 0 :(得分:40)
只需将其添加到您的样式
即可.arriveDate, .arriveTime {
-webkit-appearance: none;
-moz-appearance: none;
}
这背后的原因是IOS设备默认使用IOS按钮呈现输入
答案 1 :(得分:6)
为避免丢失应用于其他输入框的任何样式元素,请使用 textfield 而不是无。
$('.button').on('click', function(e){
$( this ).closest(".wrapper").find(":hidden").show();
$( this ).closest("div").hide();
});
$('.second').hide();
此外,如果您只想让所有日期字段显示为文本框,但仍然像日期字段一样工作...
.arriveDate, .arriveTime {
-webkit-appearance: textfield;
-moz-appearance: textfield;
}