:focus　擬似クラス

要素がフォーカスされている状態のみ対象とする擬似クラスセレクタです。

(書式)　要素:focus {プロパティ:値}
　　　　　　　(例) input:focus {border:1px solid green}

＜フォームの部品にしか適応できないようだ＞

Sample

フォーム内の各部品をクリックすればスタイルが変わります。

Sample Source......................................................................>>>

<style type="text/css">
　input.fc:focus {outline: solid 1px green}
　input.fx:focus {background-color:gray;border:1px solid magenta}
　input.fy:focus {background-color:black;border:1px solid red}
　textarea:focus {border:2px solid red}
</style>
</head>

<body>
<form style="width:350px;border:2px dashed navy;padding:2mm">
<p>題名　<input class="fc" type="text" name="abc" size="30" value="ここに入力"><br>
　意見　<textarea rows="3" cols="40" name="txtt"></textarea><br>
　性別　<input class="fx" type="radio" name="sex" value="male">男
　　　　<input class="fx" type="radio" name="sex" value="female">女<br>
　国籍　<input class="fy" type="checkbox" name="ch" value="jp">日本
　　　　<input class="fy" type="checkbox" name="ch" value="us">米国
　<input class="fx" type=button" value="ボタン" 
　　　　　　　　　style="width:70px;background-color:green"><br><br>
</p>
</form>

:focus 擬似クラス

Sample

:focus　擬似クラス