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

【问题标题】：CSS for styling HTML5 date input calendar in Chrome用于在 Chrome 中设置 HTML5 日期输入日历样式的 CSS
【发布时间】：2015-04-28 13:46:19
【问题描述】：

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

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

【问题讨论】：

我认为是重复的，请查看此答案：stackoverflow.com/a/16106788/2104879
不，我不是在询问输入字段，我需要一种设置日历样式的方法。另外，我不需要跨浏览器解决方案。
@meatFeed 我知道你的痛苦，那些认为红色是蓝色的复制品的笨蛋； Stack 上的信誉系统明确不与能力相关！

标签： css html google-chrome date input

【解决方案1】：

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

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

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

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

【讨论】：