HTML5 日期选择器是否有任何样式选项？

Question

我真的很喜欢 HTML5 日期选择器。

需要注意的是，我没有看到或预见到将颜色应用于选择器本身的方式，这将在大多数网站上使用日期选择器来破坏交易。 <select> 遭受广泛的 JavaScript 替换黑客攻击，原因很简单，人们无法让它变得漂亮。

那么 type='date' 的 HTML 输入是否有任何已知的样式选项？

原文由 Wray Bowling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

WebKit 提供以下八个伪元素来自定义日期输入的文本框：

 ::-webkit-datetime-edit
::-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
::-webkit-calendar-picker-indicator

因此，如果您认为日期输入可以使用更多间距和荒谬的配色方案，您可以添加以下内容：

 ::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

 <input type="date">

原文由 Anselm 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

目前，没有跨浏览器、无脚本的方式来设置原生日期选择器的样式。

至于 WHATWG/W3C 内部发生了什么……如果这个功能真的出现了，它很可能会在 CSS-UI 标准或一些 Shadow DOM 相关标准下。 CSS4-UI wiki 页面 列出了一些从 CSS3-UI 中删除的与外观相关的东西，但老实说，人们似乎对 CSS-UI 模块没有太大兴趣。

我认为现在跨浏览器开发的最佳选择是使用基于 JavaScript 的界面实现漂亮的控件，然后禁用 HTML5 本机 UI 并替换它。我认为在未来，也许会有更好的本机控件样式，但更有可能是将本机控件换成您自己的 Shadow DOM“小部件”的能力。

这是不可用的，这很烦人，申请标准支持总是值得的。尽管看起来 jQuery UI 的负责 人确实尝试过但没有成功。

虽然这一切都非常令人沮丧，但也值得考虑 HTML5 日期选择器的优势，以及为什么自定义样式很困难，也许应该避免。在某些平台上，日期选择器 看起来非常不同，我个人想不出任何通用的方式来设置本机日期选择器的样式。

原文由 Cameron 发布，翻译遵循 CC BY-SA 3.0 许可协议