これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

::placeholder CSS 疑似要素 は、form 要素の プレースホルダーのテキスト を表します。

::placeholder {
  color: blue;
  font-size: 1.5em;
}

::first-line 疑似要素に提要できる CSS プロパティのサブセットだけが、ルール内でセレクタに ::placeholder を使用できます。

Note: Firefox では、プレースホルダーのテキストの見た目は既定で透明なグレーです。

構文

::placeholder

HTML

<input placeholder="Type something here!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

結果

仕様

仕様 ステータス コメント
CSS Pseudo-Elements Level 4
::placeholder の定義
草案 初期定義。

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
基本サポート 57 51.0 (51.0)[1] 未サポート 未サポート 44 10.1
プレフィックスを用いた部分サポート Supported Supported Supported 10 -ms- Supported 5 -webkit-
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 57 57 52.0 (52.0) 未サポート   10.3
プレフィックスを用いた部分サポート 2.1 -webkit- Supported Supported 10 -ms- 37 -webkit- 4.3 -webkit-

[1] Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) 以前まで、Gecko はプレフィックス付きの ::-moz-placeholder 疑似要素として実装していました。

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,