CSSのfocus-within擬似クラスの使い方

CSSには子要素がフォーカスを取得した時に発生するfocus-withinという疑似クラスがあります。

それを使えば、要素のフォーカス取得時の見た目の変更が容易になります。

CSSのfocus-within擬似クラスの使い方
1. HTML
2. CSS

CSSのfocus-within擬似クラスの使い方

CSSのfocus-within擬似クラスの使い方は簡単でfocusを持った子要素を囲んだ親要素を作って囲むだけです。

HTML

HTMLはフォーカスを持つ子要素をdivタグなどで囲います。

<body>
    <div class="box">
        <label for="textbox">入力エリア： </label>
        <input type="text" name="textbox" value="" id="textbox"><br>
    </div>
    <div class="box">
        <label for="checkbox1">チェックボックス１： </label>
        <input type="checkbox" name="checkbox[]" value="checkbox1" id="checkbox1"><br>
        <label for="checkbox2">チェックボックス２： </label>
        <input type="checkbox" name="checkbox[]" value="checkbox2" id="checkbox2"><br>
        <label for="checkbox3">チェックボックス３： </label>
        <input type="checkbox" name="checkbox[]" value="選択肢３" id="checkbox3">
    </div>
    <div class="box">
        <label for="radio1">ラジオボタン１： </label>
        <input type="radio" name="radio" value="radio1" id="radio1"><br>
        <label for="radio2">ラジオボタン２： </label>
        <input type="radio" name="radio" value="radio2" id="radio2"><br>
        <label for="radio3">ラジオボタン３： </label>
        <input type="radio" name="radio" value="radio3" id="radio3">
    </div>
</body>

上記のソースで言うと「.box:focus-within」の部分が今回のターゲット部分です。

あとはフォーカスのある要素をdivタグで囲んでおくだけです。

CSS

focus-withinを使ったCSSです。

.box{
    background-color: skyblue;
}
.box:focus-within{
    background-color: red;
}

これで子要素がフォーカスを得るたびに囲まれている部分の背景色が変わります。

簡単なのですが忘れそうなのでメモ程度に書いておきます。