猿问
下载APP

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

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

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

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

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


DIEA
浏览 99回答 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">

天天世纪

目前,没有跨浏览器,无脚本的方式来设置本机日期选择器的样式。至于WHATWG / W3C内部发生了什么...如果这个功能确实出现,它可能会在CSS-UI标准或一些与Shadow DOM相关的标准之下。该CSS4-UI wiki页面列出了从CSS3 UI的下降,但说实话,似乎没有要的CSS-UI模块中的极大兴趣几样有关的东西。我认为现在跨浏览器开发最好的选择是使用基于JavaScript的界面实现漂亮的控件,然后禁用HTML5本机UI并替换它。我认为将来可能会有更好的原生控件样式,但也许更有可能是为你自己的Shadow DOM“widget”换出原生控件的能力。令人讨厌的是,这是不可用的,并且请求标准支持总是值得的。虽然看起来jQuery UI的领导似乎已经尝试过并且没有成功。虽然这一点非常令人沮丧,但也值得考虑HTML5日期选择器的优点,以及为什么自定义样式很难并且应该避免。在某些平台上,datepicker&nbsp;看起来非常不同,我个人无法想到任何通用的样式化原生日期选择器的方式。

哈士奇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
我要回答