HTML5 日期选取器的样式选项

HTML5 中的日期选取器在很大程度上与 JavaScript 库的工作方式类似，当我们聚焦到某个字段上，日历就会弹出来，然后我们可以浏览各个月份和年份来选择日期。

因此，如果你想要更宽裕的间距和配色方案，可将以下内容添加到代码中。

::-webkit-datetime-edit { padding: 2 em; }
::-webkit-datetime-edit-fields-wrapper { background:green; }
::-webkit-datetime-edit-text { color: blue; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: red; }
::-webkit-datetime-edit-day-field { color: orange; }
::-webkit-datetime-edit-year-field { color: red; }
<input type = "date">

mkotla

更新于： 2020-06-02

2K+ 浏览

助力职业生涯 起航

完成课程即可获得认证

入门