[解決済み] HTML5のDateピッカーにスタイルオプションはありますか？

質問

HTML5 の日付ピッカーには本当に感激しています。W3C が最終的に不足分を補い、このような一般的な入力形式を再発明し続ける必要がないことを知るのは、とても新鮮です。

注意点は、ピッカー自体に色を適用する方法があまりないこと、または予見できないことです。その <select> は、人々がそれをきれいにすることができないという単純な理由から、広くjavascriptを置き換えるハックに悩まされています。W3C の土地で何が起こっているのか、誰か知っている人がいれば教えてください。

これは、別の大きな質問と多少対になっています (答えを知っている場合に限ります)。W3C や WHATWG に参加して、これらの事柄のいくつかが日の目を見るようにすることは、私の時間を割く価値があるでしょうか。どのような種類の洞察も役に立ちます。

どのように解決するのですか?

日付入力のテキストボックスをカスタマイズするために、WebKitでは以下の8つの擬似要素が用意されています。

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