我真的很喜欢HTML5的日期选择器。令人耳目一新的是,W3C终于填补了一些空白,因此我们不必不断地重新发明这样一种常见的输入形式。
需要注意的是,我没有看到或预见到太多颜色应用于选择器本身的方式,这将使datepicker的使用在大多数网站上成为一种破坏交易的方式。<select>
遭受了广泛的javascript替换黑客攻击,原因很简单,人们不能让它变得漂亮。我很好奇有没有人知道W3C发生了什么?
这在某种程度上与另一个更大的问题(如果你知道答案)配对:是否值得我花时间参与W3C或WHATWG,以便让其中一些事情得到解决?任何类型的见解都是有帮助的。
发布于 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">
发布于 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。
发布于 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
复制相似问题