CSSだけで複数の同意項目チェックボックスを作る―has()疑似クラス

URLをコピーしました！

個人情報の取り扱いや規約などでよく使われている複数同意項目のinput(checkbox）をCSSだけで作ってみた。
これまでもチェックボックスが１個だけならCSSだけで制作できたが、複数同時チェックは難しく、JSを使うのがほとんどだった。
そこに疑似クラスhasが使えるようになったことで、条件分岐をCSSでも設定適用できるようになった。

CSSで同意項目１個だけパターン

同意項目１個だけならチェックされたかどうかを判別するだけなので、比較的簡単に作成できる。

See the Pen CSSで同意項目（チェックボックス）を作る by maco (@tmozou) on CodePen.

:has(input:checked) input[type=button]
input要素はチェックされたかどうかを判定するchecked属性を持っている。
これでチェックされたパターンを設定し、focusで同意ボタンの可視不可視を切り替える。

CSSで同意項目複数パターン

同意項目が複数あるときは、hasでAND条件を設定していく。

See the Pen CSSで同意項目（複数チェックボックス）を作る by maco (@tmozou) on CodePen.

チェックボックス１個のときと、ほぼほぼ同じ記述だが、チェックボックスそれぞれにクラス（.box1 .box2)を設定し、両方がchechedされたときに同意ボタンを可視にしている。下CSS参照

.box2 .title{
    width:400px;
    margin: 20px auto 0;
    padding: 10px;
    background-color: #222;
    color: #fff;
    text-align: center;
}

.box2 .text{
    text-align: left;
    width:400px;
  margin: 30px auto;
}

.box2 p{
    margin: 30px;
}

.box2 form {
    margin: 50px;
    text-align: center;

    /* 同意するボタン  */
    input[type=button] {
        margin-top: 30px;
        background: #eaeaea;
        border: #c0c0c0 solid 1px;
        border-radius: 10px;
        color: #c0c0c0;
        padding: 10px 80px;
        pointer-events: none;
        transition: background-color .3s, color .5s;
    
        &:focus {
        /* チェックボタンが押されていないときはボタン不可視  */
        visibility: hidden; 
        }
    }

    /* チェックボタンが２か所押されたときの判定  */
    &:has(input:checked.btn01):has(input:checked.btn02) input[type=button] {
        background: #222;
        border: #222 solid 1px;
        color: #e1e1e1;
        cursor: pointer;
        pointer-events: auto;

        &:focus {
        visibility: visible;/* チェックボタンが押されたときはボタン可視  */
        }
    }

    @media (hover: hover) {
        &:has(input:checked) input[type=button]:hover {
        background: #222;
        color: #fff;
        }
    }
}

疑似クラスのhasを追加していけば、もっと多くの同意項目チェックを増やすことができる。

複雑な条件分岐ができるようになった疑似クラスhas()

これまで親から子・孫・兄弟を特定し、CSS適用はできていたが、:has()の擬似クラスによって親が保有する子要素や孫要素などから、親から孫以下まで指定できるようになった。
それによりCSSをより詳細に条件分岐設定できるようになって、かなり便利に。
その分、CSSの条件分岐が複雑化して、想定外の崩れや保守・修正が困難になってしまうという一面も出てきた。

hasは便利だが出来るだけシンプルな使い方を心がけておいた方が無難だと思う。
マークアップやCSSは出来るだけシンプルであったほうが保守メンテしやすい。
（自分が修正する時はもちろん、他人が修正する時は解読がもっと大変になってしまう・・・）

has()の複数条件の指定方法例

has()が指定できる条件は一つではなく、２つ、３つと複数指定できる。その分、条件分岐が複雑化してしまうので注意が必要。
これまでCSSでの条件分岐はnotなどが使えたが、hasを組み合わせた条件設定方法をメモっておく。

OR条件で指定―has(1つ目の要素, 2つ目の要素,…)

has()で複数の要素をカンマ(,)で設定していくパターン。
いくつでも条件は追記できるが、カンマ(,)はOR条件なので注意。

例： div:has(p > a , span:nth-child(2)) span{…｝

AND条件で指定―has(1つ目の要素):has(2つ目の要素):has(…

要素条件をいくつでも設定でき、全ての条件に当てはまる要素にCSS設定できる。
これを使うことにより、上の同意項目の複数チェックボックスもCSSだけで作れるように。

例： :has(input:checked.btn01):has(input:checked.btn02) input[type=button] {…｝

notとhasの組み合わせ条件分岐―has(:not(1つ目の要素, 2つ目の要素,…))

notでOR条件の否定の形になる。
よってnotの中に設定した条件に全て当てはまらない時にCSSが適用される。

例　 :has(not(p > a span, span:nth-child(2)))

hasのAND条件に否定notが混ざる―has(1つ目の要素):has(:not(2つ目の要素)):has(…

AND条件に否定notが混ざる場合。
notが使われているので混乱しがちだが、結局は全部AND 条件で、全ての条件に当てはまるときにCSSが適用される。

1個目の条件に当てはまり、2個目の条件には当てはまらず、3個目の条件には…と言う感じで、より細かな条件分岐設定ができる。
その分、条件分岐複雑になりがちなので、特定の要素やどうしてもこれじゃないとできない！と言う時にだけ使う方が良さげ。（個人的にはできるだけ使いたくない）