:placeholder-shown クラス

　:placeholder-shown クラスは、<input> や <textarea> といった入力に関する <form> 部品エレメントにおいて、placeholder 属性による入力例が表示されている間は指定されたスタイルを反映する疑似クラスです。

:placeholder-shown

input:placeholder-shown{
	background-color: #77CC88;
}

表示例

placeholder の例 :

詳しくはExampleを参照してください

　placeholder 属性の値が表示されている間（何か入力されるまで）は該当するスタイルを反映します。

- ad -

構文(Syntax)

HTMLElement:placeholder-shown {
  style_propaty: value;
	...
}

　疑似クラスはDOM ( JavaScript )から操作できません。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

　:placeholder-shown クラスの例です。

　ここでは<input>と<textarea>エレメントについて試しています。 placeholder属性の値が表示されている間は背景色が表示されます。何か入力することで背景色が変わります。

- ad -