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

我正在使用带有 type=date 和 type=time 的本机日期和时间选择器来处理我正在开发的网站的移动版本。不过，输入字段不尊重我的 CSS。

Desktop:

iOS devices:

本质上，我需要两个日期和时间输入来填充大约 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;
    }

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

Thanks!

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

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

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