用于在Chrome中设置HTML5日期输入日历样式的CSS [英] CSS for styling HTML5 date input calendar in Chrome

问题描述

如果单击html5日期输入上的向下箭头，是否可以设置弹出式日历的样式？

Is there a way to style the calendar that pops up if you click the down arrow on a html5 date input?

<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 /

我知道有一些用于对输入字段进行样式设置的伪选择器：

I know there are pseudo selectors for styling the input field itself:

::-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;
}

在最低限度下，我只需要在最新版本上工作即可版本的Chrome浏览器

推荐答案

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

According to Google's FAQ, there is no way to modify the style at this time: 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的渲染效果，或者在输入上使用自定义库type = text 字段以防止冲突

You are left with keeping with Chrome's rendering, or using a custom library over an input type="text" field to prevent conflicts

这篇关于用于在Chrome中设置HTML5日期输入日历样式的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！