placeholder-shown 擬似クラス

擬似クラス placeholder-shown は、いわゆるプレースホルダーテキスト（入力を開始すると消えるヒントテキスト）が表示されている input または textarea にスタイルを設定します。

構文

cssセレクタ:placeholder-shown {}

例

プレースホルダーテキストが表示されている input には赤い枠線を設定し、テキスト入力後は枠線が緑色に変わるようにしてみましょう：

html<form>
  <input placeholder="テキストを入力してください">
</form>

cssinput {
  border: 1px solid green;
}
input:placeholder-shown {
  border-color: red;
}

Результат:

関連項目