有没有办法为 Chrome/Edge 80 中的新输入日期和输入时间选择器设置样式答案

【问题标题】：Is there a way to style the new input date and input time pickers found in Chrome/Edge 80有没有办法为 Chrome/Edge 80 中的新输入日期和输入时间选择器设置样式
【发布时间】：2020-10-02 08:36:58
【问题描述】：

这是桌面版 Chrome/Edge 中的（新）本机日期选择器。

据我所知，它不尊重我的操作系统/浏览器配色方案（深色/浅色），并且始终呈现为白色。有没有办法在 CSS 中覆盖这种行为？

或者有没有办法提供自定义样式，例如更改突出显示颜色。

感谢您的帮助。

P.s：我尝试按照 Microsoft 的 blog post 中给出的说明进行操作，但没有得到它的工作（强制颜色调整）

Live Example (run in Chrome/Edge)

<br />

<label>force-color-adjust: auto <input style="forced-color-adjust: auto;" type="date"></label>

<br />

<label>force-color-adjust: none <input style="forced-color-adjust: none;" type="date"></label>

【问题讨论】：

您是否查看过 CSS -webkit--这些输入元素的前缀伪元素名称列表？例如developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
forced-color-adjust 仍然是一个草稿属性，它只允许您选择退出 UA 配色方案，而不是选择加入它们。
@Dai Thx，现在看看。据我所知，那里什么都没有
@Dai 是的，好像我误解了它的用途。我还找到了一篇深入探讨此功能的相关文章：blogs.windows.com/msedgedev/2020/09/17/…
@Deepak-MSFT 不幸的是，您的回答并不能解决我的问题，因为这与其他可访问性设置有关。我需要的是根据操作系统主题（亮/暗）的prefers-color-scheme 设置下拉菜单（不是输入）的样式。

标签： html css google-chrome datepicker microsoft-edge

【解决方案1】：

如果你想对日期选择器应用一些样式，那么你可以参考this answer。

我也尝试检查blog-post 和您的示例代码。

我看到博客中显示的日期选择器并注意到他们在谈论 Windows 高对比度。

这意味着要获得该博客中显示的类似输出，您需要在 Windows 10 操作系统上打开 High Contrast 模式。

您可以参考以下步骤打开/关闭高对比度模式。

在桌面屏幕上单击鼠标右键。
点击个性化选项。
选择左侧边栏中的背景标签，然后点击高对比度设置选项。
切换按钮以打开高对比度模式。

现在，如果您在 MS Edge (Chromium) 浏览器中看到该网页，那么您可以看到与博客中所示相同的结果。

我建议您也尝试检查this link 中提到的代码示例。将 CSS 应用于元素会很有帮助，尤其是对比模式。

【讨论】：