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

前端之家收集整理的这篇文章主要介绍了HTML5日期选择器是否有任何样式选项?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我真的很兴奋HTML5日期选择器。它是令人耳目一新的知道,W3C终于拾起一些松弛,所以我们不必继续重新创造这样一个常见的形式的输入。

注意事项是,我没有看到或预见到在应用颜色到选择器本身的方式,这将使得在大多数网站上使用日期控制器类型的交易。 < select>遭受广泛的javascript替换黑客的简单的原因,人们不能使它漂亮。我很好奇,如果有人知道在W3C土地正在发生什么?

这与另一个更大的问题(如果你知道答案)有些配对:是否值得我的时间尝试参与W3C或WHATWG,以便其中的一些东西看到一天的光?任何形式的洞察都是有帮助的。

解决方法

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">

猜你在找的HTML5相关文章