提问者:小点点

用于在Chrome中设置HTML5日期输入日历样式的CSS


如果您单击html5日期输入上的向下箭头,是否有办法设置弹出的日历样式?

<form>
    <label for="f-duedate">Due date</label>
        <input id="f-duedate" type="date" name="duedate"
               data-date-format="dd.mm.YYYY">
</form>

http://jsfiddle.net/no8a17eo/1/

我知道有一些伪选择器用于设置输入字段本身的样式:

::-webkit-datetime-edit-fields-wrapper {
}
::-webkit-datetime-edit-text {
}
::-webkit-datetime-edit-month-field, 
::-webkit-datetime-edit-day-field, 
::-webkit-datetime-edit-year-field {
}
::-webkit-inner-spin-button {
    display: none;
}
::-webkit-calendar-picker-indicator:hover {
   background:none;
}

至少我只需要在最新版本的谷歌浏览器上使用它


共1个答案

匿名用户

根据谷歌常见问题解答,目前无法修改样式:https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

如何更改日期选择器的外观?

当前无法设置日期选择器的外观样式。在WebKit中,我们以前提供了使用-WebKit外观CSS属性或::-WebKit foo伪类选择器设置表单控件样式的方法。但是,日历弹出窗口在WebKit中不提供这种方式,因为它与文档是分开的,就像一个弹出菜单,并且当前没有一个标准来控制其子元素的样式。

您可以继续使用Chrome的渲染,或者在input type=“text”字段上使用自定义库来防止冲突