有没有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米增量
