HTML5日期选择器有什么样式选项吗？
我真的很喜欢HTML5的日期选择器。令人耳目一新的是，W3C终于填补了一些空白，因此我们不必不断地重新发明这样一种常见的输入形式。
需要注意的是，我没有看到或预见到太多颜色应用于选择器本身的方式，这将使datepicker的使用在大多数网站上成为一种破坏交易的方式。<select>遭受了广泛的javascript替换黑客攻击，原因很简单，人们不能让它变得漂亮。我很好奇有没有人知道W3C发生了什么？
这在某种程度上与另一个更大的问题(如果你知道答案)配对:是否值得我花时间参与W3C或WHATWG，以便让其中一些事情得到解决？任何类型的见解都是有帮助的。
回答 5
Stack Overflow用户
发布于 2013-04-19 22:17:32
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">
Stack Overflow用户
发布于 2013-02-19 07:11:45
目前，还没有跨浏览器、无脚本的方式来设置原生日期选择器的样式。
至于WHATWG/W3C内部发生了什么……如果这个功能真的出现了，它很可能是在CSS-UI标准或某个Shadow DOM-related标准之下。CSS4-UI wiki page列出了一些从CSS3-UI中删除的与外观相关的东西，但老实说，人们对CSS-UI模块似乎并不感兴趣。
我认为你现在进行跨浏览器开发的最好办法，就是用基于JavaScript的界面实现漂亮的控件，然后禁用HTML5原生UI并替换它。我认为在未来，也许会有更好的本机控件样式，但更有可能的是将本机控件替换为您自己的Shadow DOM“小部件”。
令人恼火的是，这是不可用的，并且请求标准支持总是值得的。尽管它看起来确实像是jQuery UI的主要has tried and was unsuccessful。
虽然这一切都非常令人沮丧，但也值得考虑HTML5日期选择器的优点，以及为什么自定义样式很难，也许应该避免。在某些平台上，datepicker looks extremely different和我个人想不出任何通用的方法来样式化原生datepicker。
Stack Overflow用户
发布于 2020-06-04 10:29:15
仅供参考，我需要更新日历图标的颜色，这在color、fill等属性中似乎是不可能的。
我最终确定了一些filter属性会调整图标，所以虽然我最终没有弄清楚如何使它变成任何颜色，但幸运的是，我需要做的就是让它在黑色背景下可见，这样我就能够执行以下操作：
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}<body>
<input type="date" />
</body>
希望这能帮助一些人，因为在很大程度上，chrome甚至直接说这是不可能的。
https://stackoverflow.com/questions/14946091
复制相似问题