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

::placeholder

::placeholder は CSS の擬似要素で、 <input> または <textarea> 要素のプレイスホルダーテキストを表します。

擬似要素フォーム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:placeholder
57
79
51
10.1
57
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit-input- (6)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit-input- (12)
  • ベンダープレフィックス付きで対応: -ms-input- (12)
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (19)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit-input- (5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit-input- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit-input- (4.2)

基本構文

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

ライブデモ

itarikstyle

CSS itarikstyle demo.

プレビュー全画面表示

customcol-

CSS customcol- demo.

プレビュー全画面表示

Textarea

CSS Textarea demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク