HTML5の日付ピッカーをCSSでカスタマイズする方法とスタイルオプション

HTML5の<input type="date">による日付ピッカーは、従来のJavaScriptライブラリとほぼ同じように動作します。入力フィールドにフォーカスするとカレンダーがポップアップ表示され、月や年を移動しながら目的の日付を選択できます。

日付ピッカーの基本的な動作

HTML5では特別なライブラリを読み込むことなく、<input type="date">を記述するだけでネイティブの日付選択UIが利用できます。ユーザーがフィールドをクリックまたはフォーカスすると、ブラウザ標準のカレンダーが表示され、直感的な操作で日付を入力できるのが特徴です。

CSSで見た目をカスタマイズする

デフォルトのままでも十分実用的ですが、日付入力フィールドに余白を持たせたり、独自のカラースキームを適用したいケースもあるでしょう。そのような場合は、WebKit系ブラウザ向けに用意されている専用の疑似要素を使うことで、細かくスタイルを調整できます。

::-webkit-datetime-edit { padding: 2em; }
::-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">に適用すると、編集領域全体に大きなパディングが付き、背景色や区切り文字・各フィールドの文字色がそれぞれ変化します。

各疑似要素の役割

• ::-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 … 年の表示部分のスタイルを変更します。

ブラウザ互換性に関する注意点

これらの疑似要素は、Chrome・Safari・EdgeなどのWebKit／Blinkベースのブラウザでのみ有効です。Firefoxなど一部のブラウザでは反映されないため、本番環境で使用する際はフォールバックのデザインも考慮しておきましょう。また、カレンダーの表示アイコンをカスタマイズしたい場合は、::-webkit-calendar-picker-indicatorという疑似要素も利用可能です。