设置iOS设备上本机html5日期和时间选择器的宽度

我正在使用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;
    }

.arriveDateWrapper{
宽度：49%；
保证金权利：2%；
浮动：左；
位置：相对位置；
}
.到达日期{
宽度：100%；
高度：28px；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.arriveTimeWrapper{
宽度：49%；
浮动：左；
}
.到达时间{
宽度：100%；
高度：28px；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}

如果有人能告诉我如何在使用本机日期/时间选择器时显示占位符，那也太好了

---

谢谢

只需将此添加到您的样式中即可

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

---

这背后的原因是，默认情况下，IOS设备使用IOS按钮呈现输入

为避免丢失应用于其他输入框的任何样式元素，请使用文本字段而不是无

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

另外，如果您只是想让所有日期字段看起来像文本框，但仍然像日期字段一样工作

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

---

发布其余的结构我添加了更多的结构。有没有办法设置这些输入的宽度？谢谢，这对我很有帮助