HTML5 日期选择器是否有任何样式选项? [英] Are there any style options for the HTML5 Date picker?

问题描述

我对 HTML5 日期选择器非常感兴趣.令人耳目一新的是，W3C 终于弥补了一些不足，因此我们不必不断重新发明这种常见的输入形式.

I am really stoked about the HTML5 date picker. It is refreshing to know that the W3C is finally picking up some of the slack so we don't have to keep re-inventing such a common form of input.

需要注意的是，我没有看到或预见到将颜色应用于选择器本身的方式，这将在大多数网站上使用日期选择器类型的交易破坏者.<select> 受到广泛的 javascript-replacement hack 的影响，原因很简单，人们无法让它变得漂亮.我很好奇是否有人知道 W3C 领域发生了什么?

The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread javascript-replacement hacks for the simple reason that people can't make it pretty. I'm curious if anyone knows what's going on in W3C land?

这与另一个更大的问题相关(如果您知道答案的话):我花时间尝试参与 W3C 或 WHATWG 以便其中一些事情大放异彩是否值得?任何形式的见解都有帮助.

This is somewhat paired with another larger question (in case you know the answer): Is it worth my time to try to get involved with the W3C or WHATWG so that some of these things see the light of day? Any sort of insights are helpful.

推荐答案

WebKit 提供了以下八个伪元素用于自定义日期输入的文本框:

The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:

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

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

So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:

::-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 日期选择器是否有任何样式选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！