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

问题描述

我真的很喜欢HTML5日期选择器。这是令人耳目一新的，知道W3C终于收拾了一些松散，所以我们不必重新发明这样一种常见的输入形式。

值得注意的是，我没有看到或预见到将颜色应用于选择器本身的方式，这将在大多数站点上使用datepicker类型的交易破坏者。由于简单的原因，人们无法使其变得漂亮，因此< 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 
  / pre> 
 
 
所以如果你认为日期输入可以使用更多的间距和可笑的配色方案，你可以添加以下内容：
 
 
 
 
 
 
  ::  -  webkit-datetime-edit {padding：1em; } ::  -  webkit-datetime-edit-fields-wrapper {background：silver; } ::  -  webkit-datetime-edit-text {color：red;填充：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> / code> 
 
 
 
 
 
 
  
 
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.

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?

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.
解决方案
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屋！