:focus擬似クラス …… フォーカスされた要素にスタイルを適用する
広告
:focus擬似クラスは、ユーザーの操作で要素がフォーカスされた際のスタイルを指定します。例えば、フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態などです。
- 書式
- 要素名:focus {プロパティ名:値;}
- 適用対象
- フォーカスされている要素
input:focus {background-color:#ccffcc;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<form action="cgi-bin/abc.cgi" method="post">
<p>お名前<br><input type="text" name="namae" size="30"></p>
<p>メール<br><input type="text" name="mail" size="30"></p>
<p>ご意見<br><input type="text" name="goiken" size="40"></p>
<p><input type="submit" value="送信する"></p>
</form>
</body>
</html>
↓↓↓
広告