首頁猿問 HTML5日期選擇器有任何樣式選項嗎？

HTML5日期選擇器有任何樣式選項嗎？

Html5

DIEA 2019-08-16 17:08:34

HTML5日期選擇器有任何樣式選項嗎？我對HTML5日期選擇器非常感興趣。令人耳目一新的是，W3C終于找到了一些懈怠，所以我們不必繼續(xù)重新發(fā)明這種常見的輸入形式。需要注意的是，我沒有看到或預見到將顏色應用于拾取器本身的方式，這將使得在大多數(shù)站點上使用日期選擇器類型的交易破壞者。<select>由于人們無法使其變得漂亮的簡單原因而遭受廣泛的javascript替換黑客攻擊。如果有人知道W3C土地上發(fā)生了什么，我很好奇嗎？這有點與另一個更大的問題（如果你知道答案）配對：我是否值得花時間嘗試參與W3C或WHATWG，以便其中一些事情能夠看到光明的一天？任何形式的見解都是有幫助的。

查看完整描述

3 回答

慕運維8079593

TA貢獻1876條經驗獲得超5個贊

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; }

反對回復 2019-08-16

哈士奇WWW

TA貢獻1799條經驗獲得超6個贊

在Zurb的github上找到了這個

如果你想做一些更自定義的樣式。這是日期組件的webkit呈現(xiàn)的所有默認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;}

反對回復 2019-08-16