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

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

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

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

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


DIEA
浏览 1933回答 3
3回答

慕运维8079593

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

哈士奇WWW

在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;}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5