有没有HTML5dateselect器的任何样式选项?

我真的很喜欢HTML5dateselect器。 知道W3C终于find了一些松懈的情况令人耳目一新,所以我们不必再重复这种常见的input方式。

需要注意的是,我没有看到或预见到在select器本身上应用颜色的方式,这将在大多数站点上使用dateselect器的交易断路器。 <select>受到广泛的JavaScriptreplace黑客的影响,原因很简单,人们无法做到这一点。 我很好奇,如果有人知道在W3C的土地上发生了什么事情?

这与另外一个更大的问题(如果你知道答案的话)有些搭配:是否值得我的时间去尝试参与W3C或WHATWG,以便其中的某些事情能够看到白天的亮点? 任何types的见解都是有帮助的。

WebKit提供了以下八个伪元素来自定义dateinput的文本框:

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

所以,如果你认为dateinput可以使用更多的间距和一个荒谬的配色scheme,你可以添加以下内容:

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

目前,没有跨浏览器,无脚本方式的本地dateselect器的样式。

至于WHATWG / W3C里面发生了什么……如果这个function确实出现,它可能会在CSS-UI标准或者一些与Shadow DOM相关的标准之下。 CSS4-UI wiki页面列出了一些与CSS3-UI相关的与外观有关的东西,但是说实话,CSS-UI模块似乎并没有太多的兴趣。

我认为你现在最好的select就是使用基于JavaScript的接口来实现漂亮的控件,然后禁用HTML5的本地UI并replace它。 我想在未来,也许会有更好的本地控制样式,但也许更有可能将replace您自己的Shadow DOM“小部件”的本地控制。

令人烦恼的是,这是不可用的,上访标准支持总是值得的。 虽然看起来像jQuery UI的领导已经尝试过,并没有成功 。

虽然这是非常令人沮丧的,但也值得考虑HTML5dateselect器的优点,也是为什么自定义样式很困难,也许应该避免。 在一些平台上,datepicker 看起来非常不同 ,我个人不能想到任何通用的方式来devise本地的datepicker。

在Zurb的github上find了这个

如果你想做更多的自定义样式。 这里是date组件的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; } 

希望这将帮助!

 **HTML:** <input type="date" value="From" name="from" placeholder="From" required=""/> **CSS** input[type="date"]{ background-color: red; outline: none; } input[type="date"]::-webkit-clear-button { font-size: 18px; height: 30px; position: relative; } input[type="date"]::-webkit-inner-spin-button { height: 28px; } input[type="date"]::-webkit-calendar-picker-indicator{ font-size: 15px; } 

date时间input可以自定义为。

 <input type=date step=7 min=2014-09-08> - Monday only 

– 15米增量

http://www.wufoo.com/html5/types/4-date.html