[渣翻]如何在IOS设备上设置html5原生日期-时间选择器的宽度

题主：

我正在使用原生的日期-时间选择器type = date和type = time为我正在开发的网站做移动版本的适配。但是input输入框并没有正确显示我设置的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;
    }

如果有人能告诉我如何正确设置placeholder那将再好不过了。

答主1：

只需要添加这个到你的styles中

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

出现这种情况的原因是IOS设备默认是用IOS的buttons来渲染input

答主2：

为了避免其它输入框丢失样式，你应该使用textfield而不是none

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

同时，如果你想要让所有date fields和textboxes一样显示但是仍然像date fields一样生效，你应该：

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

总结

原文链接：# Set width of native html5 date and time pickers on iOS devices

答主2的写法应该能解决大部分bug，不得不吐槽一下，写前端页面总有不同的浏览器出来搞心态。