:focus擬似クラスを使用することで、1行テキスト入力が操作で要素がフォーカスされた際のスタイルを指定することができます。

ポイントは以下です。

.outline-test:focus {
                outline:solid 2px red;
                    }

:focus 疑似クラスは、ユーザーがキーボードやマウスで要素を選択してフォーカスしている状態のときにスタイルを設定します。

主にフォーム要素（入力フィールド、ボタンなど）に適用され、視覚的に強調表示してユーザーに現在操作可能な要素を示します。

 <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>
Webアプリケーション制作のための小ネタ集　目次に戻る