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+ 瀏覽

助力職業生涯 起航

完成課程即可獲得認證

入門