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"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;}input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;}input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;}