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

Question

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

我对HTML5日期选择器非常感兴趣。令人耳目一新的是，W3C终于找到了一些懈怠，所以我们不必继续重新发明这种常见的输入形式。

需要注意的是，我没有看到或预见到将颜色应用于拾取器本身的方式，这将使得在大多数站点上使用日期选择器类型的交易破坏者。<select>由于人们无法使其变得漂亮的简单原因而遭受广泛的javascript替换黑客攻击。如果有人知道W3C土地上发生了什么，我很好奇吗？

这有点与另一个更大的问题（如果你知道答案）配对：我是否值得花时间尝试参与W3C或WHATWG，以便其中一些事情能够看到光明的一天？任何形式的见解都是有帮助的。

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

Answer 2

在Zurb的github上找到了这个如果你想做一些更自定义的样式。这是日期组件的webkit呈现的所有默认CSS。input[type="date"]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-items:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;-webkit-inline-flex; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;monospace; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-padding-start:&nbsp;1px;}input::-webkit-datetime-edit&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-user-modify:&nbsp;read-only&nbsp;!important; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;min-width:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}input::-webkit-datetime-edit-fields-wrapper&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;-webkit-user-modify:&nbsp;read-only&nbsp;!important; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;1px&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;pre;}