placeholder-shown 擬似クラス
擬似クラス placeholder-shown は、いわゆるプレースホルダーテキスト(入力を開始すると消えるヒントテキスト)が表示されている input または textarea にスタイルを設定します。
構文
セレクタ:placeholder-shown {}
例
プレースホルダーテキストが表示されている input には赤い枠線を設定し、テキスト入力後は枠線が緑色に変わるようにしてみましょう:
<form>
<input placeholder="テキストを入力してください">
</form>
input {
border: 1px solid green;
}
input:placeholder-shown {
border-color: red;
}
:
関連項目
-
入力フィールドのヒントを設定する属性
placeholder -
プレースホルダー自体にスタイルを設定する擬似要素
placeholder