MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:placeholder-shown

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

概要

:placeholder-shown 疑似クラス は、プレースホルダーテキスト を表示しているフォーム要素を表します。

構文

:placeholder-shown { style properties }

HTML

<input placeholder="Type something here">

CSS

input {
  border: 2px solid black;
  padding: 3px;
}

:placeholder-shown {
  border-color: silver;
}

表示結果

仕様

仕様書 策定状況 コメント
Selectors Level 4
:placeholder の定義
草案 初期定義

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本サポート
(<input type="text">)
47.0 51.0 (51.0)[1] 未サポート 未サポート[2] 34.0 9.0
type="number"type="time" および類似タイプ ? 未サポート 未サポート 未サポート ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート
(<input type="text">)
51.0 51.0 (51.0)[1] 未サポート 未サポート 9.2
type="number"type="time" および類似タイプ ? 未サポート 未サポート 未サポート ?

[1] Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) より前のバージョンでは :-moz-placeholder という名称の -moz 接頭辞つき疑似クラスを実装しており、後に ::-moz-placeholder 疑似要素で置き換えられました。標準の疑似クラスは バグ 1069012 で実装しました。

[2] この疑似クラスのサポートは、Microsoft Edge Developer Feedback ページで要望されています

関連情報

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

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