フォーカスされたら1行テキスト入力の枠色を変えたい
山崎講師:focus擬似クラスを使用することで、1行テキスト入力が操作で要素がフォーカスされた際のスタイルを指定することができます。
以下のサンプルのポイントは、8～10行目のところです。
擬似クラスを使いフォーカスがあたった際のアウトラインの太さと色を変化させています。
<html>
<head>
<title>outline.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.outline-test:focus { // .outline-testというクラスを持つ要素がフォーカスされた時
outline:solid 2px red; // アウトラインを赤色、実線、太さ2ピクセルで表示する
}
</style>
</head>
<body>
<p>この一行テキストにフォーカスすると枠に色が付きます</p>
<input class="outline-test">
</body>
</html>