HTML5の日付ピッカーにはスタイルオプションがある？カスタマイズ方法を解説

HTML5の<input type="date">で実装される日付ピッカーは、クリックするとカレンダー形式のポップアップが表示されます。表示されたカレンダーから月や年を選択するだけで、入力欄に日付を簡単に追加できます。

日付ピッカーのスタイルをカスタマイズする

日付ピッカーのポップアップや入力フィールドは、CSSの疑似要素を使って自由にカスタマイズできます。たとえば、背景色の変更も可能です。以下のコードを実行して、HTML5の日付ピッカーにスタイルオプションを追加してみてください。

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: blue; }
::-webkit-datetime-edit-text { padding: 0 0.5em; }

月・日・年フィールドの個別編集

次のコードは、月・日・年それぞれのフィールドの文字色と、カレンダー選択アイコンの背景色を個別に変更する例です。

::-webkit-datetime-edit-month-field { color: white; }
::-webkit-datetime-edit-day-field { color: red; }
::-webkit-datetime-edit-year-field { color: red; }
::-webkit-calendar-picker-indicator { background: gray; }

ブラウザ対応についての注意点

これらの疑似要素は「::-webkit-」という接頭辞が付いている通り、Chrome・Safari・EdgeなどのWebKit系ブラウザ向けのものです。Firefoxなど一部のブラウザでは正しく動作しない場合があるため、実際に運用する際は対象ブラウザでの表示を必ず確認しましょう。