2024-09-05

CSS: 入力フォームのフォーカス時に outline を表示する

CSS でinput 要素等の入力フォームのフォーカス時に、 アウトラインを表示する場合は outline プロパティを使用します。

アウトラインの色、スタイル、幅を個別に指定する場合は、 outline-color、outline-style、outline-width プロパティを使用します。

まとめて指定する場合は outlien プロパティを使い、半角スペース区切りで指定します。

outlien プロパティ 使用例

input:focus {
    outline-color: red;      /* 色 */
    outline-style: solid;    /* スタイル */
    outline-width: 1px;      /* 幅 */
}

input:focus {
    outline: 1px solid red;  /* まとめて指定 */
}

フォーカス時にアウトライン表示するサンプルコード

下のサンプルは input 要素と textarea 要素があり、それぞれフォーカスが当たると 幅 2px の赤色のアウトラインが表示されます。

<p><input type="text"></p>

<p><textarea col="20"></textarea></p>

<style>
    input, textarea {
        background-color: lavender;
    }
    input:focus {
        outline: 2px solid red;
    }
    textarea:focus {
        outline: 2px solid red;
    }

</style>