SafariのHTML5日付フィールドでplaceholderを表示する方法と注意点

SafariのHTML5日付フィールドとプレースホルダー表示の問題

input type="date" 要素に対しては、placeholder 属性が正式にはサポートされていません。日付入力フィールドはブラウザ独自のカレンダーUI（日付ピッカー）を表示する仕組みのため、プレースホルダーテキストを表示する領域が存在しないのが理由です。

なぜSafariでは動いているように見えるのか

ところが、Safariブラウザではプレースホルダーが機能しているように見えることがあります。これは、Safariが type="date" を日付型として認識せず、要素を通常のテキストフィールドとして扱うためです。つまり placeholder 属性が無視されるのではなく、入力欄が単純なテキストボックスとして振る舞い、結果的にプレースホルダーが表示されるという仕組みです。

この挙動を利用すると、Safari デスクトップ版では次のコードでプレースホルダーを表示できます。

<input type="date" name="dob" id="dob" value="" placeholder="生年月日を入力" />

Safariモバイルでの代替策：CSS擬似要素を使う

Safari のモバイル版では、CSS の :after 擬似要素と attr() 関数を組み合わせることで、同様の見た目を実現できます。placeholder 属性の値をそのまま擬似要素の内容として表示するテクニックです。

input[type='date']:after {
    color: #000000;
    content: attr(placeholder);
}

そして、これに対応するHTMLは以下の通りです。

<input name="mydate" type="date" value="" placeholder="生年月日を入力" />

導入時の注意点

これらの手法はあくまでSafari向けの回避策です。Chrome や Firefox のように type="date" をネイティブでサポートしているブラウザでは、意図したとおりに表示されない場合があります。すべてのブラウザで一貫したUXを提供したい場合は、JavaScriptによるフォールバックや、軽量の日期間ライブラリ（Flatpickr など）の導入も検討するとよいでしょう。