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

Posted 2023-02-25

【中文标题】用于在 Chrome 中设置 HTML5 日期输入日历样式的 CSS

【英文标题】：CSS for styling HTML5 date input calendar in Chrome

【发布时间】：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;

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

【问题讨论】：

我认为是重复的，请查看此答案：***.com/a/16106788/2104879

不，我不是在询问输入字段，我需要一种设置日历样式的方法。另外，我不需要跨浏览器解决方案。

@meatFeed 我知道你的痛苦，那些认为红色是蓝色的复制品的笨蛋； Stack 上的信誉系统明确不与能力相关！

【参考方案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" 字段上使用自定义库来防止冲突