用于在 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-Chrome

How do I change the appearance of the date picker?

You cannot currently style the appearance of the date picker. In WebKit, we have previously provided ways to style form controls with the -webkit-appearance CSS property or the ::-webkit-foo pseudo class selector. However the calendar popup does not provide such ways in WebKit because it is separate from the document, like a popup menu for , and there is not currently a standard for how to control styling on its sub-elements.

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