:focus クラス
:focus クラスは、エレメントが入力待ちまたは操作待ちになったら、設定されたスタイルを反映する擬似クラスです。
主に、<a>、<input>、<input>,<select>、<textarea>といった操作待ち、入力待ちになるエレメントが対象になります。
a:focus{ background-color: silver; }
似た疑似クラスに:focus-withinクラスがあります。:focus-withinクラスは、子エレメントに入力待ち、操作待ちがあるならスタイルを反映します。
ページ内 Index
構文(Syntax)
CSS
HTMLElement:focus { style_propaties; }
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
該当するものはfocus(onfocus)イベントです。
スタイルを反映したい場合は擬似クラスを利用したほうが簡易です。
in HTML
<tagelement onfocus="oneFunction()">
in JavaScript
object.onfocus = function(){ }; object.addEventListener("focus", script_);
詳しくはfocus(onfocus)イベントを参照して下さい。
Example
:focusの例です。分かり難いですが、入力待ちになると枠線が表示されます。