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

Question

如果单击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;
}

至少我只需要它就可以使用最新版本的Google Chrome

Answer 1

根据Google的FAQ，目前没有办法修改样式： https ://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google -铬合金

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

您当前无法设置日期选择器外观的样式。在 WebKit 中，我们之前提供了使用 -webkit-appearance CSS 属性或 ::-webkit-foo 伪类选择器来设置表单控件样式的方法。 然而，日历弹出窗口在 WebKit 中并没有提供这样的方式，因为它与文档是分开的，就像 的弹出菜单一样，而且目前还没有关于如何控制其子元素样式的标准。

您只能保持 Chrome 的渲染，或者在input type="text"字段上使用自定义库来防止冲突