備忘録的プログラミングリファレンス

:placeholder-shown クラス

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

:placeholder-shown例
input:placeholder-shown{
	background-color: #77CC88;
}
詳しくはExampleを参照してください

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

ページ内 Index

構文(Syntax)

CSS

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

DOM ( JavaScript )

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

Example

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

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