HTML5のinput type="date"でプレースホルダーが表示されない原因と解決方法

HTML5のinput type="date"でプレースホルダーが表示されない問題とは？

HTML5の<input type="date">フィールドは、通常のテキスト入力欄と異なり、placeholder属性を指定しても表示されません。これは日付入力フィールドの仕様によるもので、フォーム制作で多くの開発者がつまずくポイントです。

この問題は、JavaScriptまたはCSSを使うことで回避できます。以下に代表的な2つの解決方法を紹介します。

方法1：JavaScriptでtype属性を切り替える

初期状態ではtype="text"にしてプレースホルダーを表示し、フォーカスされたタイミングでtype="date"へ変更する方法です。

<input placeholder="日付を選択" class="textbox-n" type="text"
  onfocus="(this.type='date')" id="date">

この方法なら、未入力の状態では「日付を選択」というプレースホルダーが表示され、ユーザーがクリックした瞬間にカレンダー形式の日付ピッカーが立ち上がります。

さらに、フォーカスが外れたときに値が空であれば元のテキスト型へ戻すようonblurイベントを追加すると、より使い勝手の良い実装になります。

<input placeholder="日付を選択" type="text"
  onfocus="(this.type='date')"
  onblur="if(!this.value) this.type='text'">

方法2：CSSの::before擬似要素を使う

HTMLとCSSだけで完結させたい場合は、::before擬似要素とattr()関数を組み合わせる手法が有効です。

input[type="date"]::before {
  color: #ffffff;
  content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
  content: "" !important;
}

このコードでは、placeholder属性の値をcontentプロパティ経由で参照し、擬似的にプレースホルダーを描画しています。また、:focusセレクターでフォーカス時に擬似要素を空にすることで、日付選択UIの操作を妨げないようにしています。

実装時の注意点

• 方法1（JavaScript）のほうがブラウザ間の挙動が安定しており、確実性の高い解決策です。
• 方法2（CSS）はブラウザやOSによって日付の初期表示と重なる場合があるため、文字色や配置の調整が必要になることがあります。
• モバイルSafariなど一部の環境ではtype属性の動的な変更が正しく反映されないケースもあります。実装後は主要なブラウザ・デバイスでの動作確認を行いましょう。