Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
セレクター Widely available

::placeholder

::placeholder擬似要素は、フォーム入力フィールドのプレースホルダーテキスト自体のスタイルをカスタマイズするために使用します。色、フォントサイズ、不透明度などを変更でき、デザインシステムに統一感を持たせることができます。ブランドカラーに合わせたフォームデザインや、プレースホルダーの視認性調整に広く使用されています。

擬似要素フォーム

概要

::placeholder擬似要素は、フォーム入力フィールドのプレースホルダーテキスト自体のスタイルをカスタマイズするために使用します。色、フォントサイズ、不透明度などを変更でき、デザインシステムに統一感を持たせることができます。ブランドカラーに合わせたフォームデザインや、プレースホルダーの視認性調整に広く使用されています。

対応ブラウザ

デスクトップ

Chrome 57+
Edge 79+
Safari 10.1+
Firefox 51+

モバイル

Chrome Android 57+
Safari iOS 10.3+
Firefox Android 51+

基本構文

CSS 
input::placeholder {
  color: #999;
  font-style: italic;
  opacity: 1;
}

実務での使いどころ

  • フォームのプレースホルダースタイル統一

    すべての入力フィールドのプレースホルダーテキストのスタイルをデザインシステムに合わせて統一します。

注意点

  • プレースホルダーテキストはラベルの代替にはなりません。必ず<label>要素と併用してください。

アクセシビリティ

  • プレースホルダーテキストのコントラスト比は4.5:1以上を確保し、かつラベルとして使用せず補足情報にとどめてください。

参考リンク