2

現状

fontawesomeを使用したチェックボックスを作っています。

document.getElementById("disabled").onclick = function () {
    var obj = document.getElementById("check");
    if (obj.disabled === true) {
        obj.disabled = false;
        return;
    };
    obj.disabled = true;
};
html {
    text-align: center;
}

#checkBtn {
    cursor: pointer;
}

#check {
    display: none;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<label for="check" id="checkBtn">
    <i class="fas fa-check fa-3x"></i>
    <input type="checkbox" id="check">
</label>
<button id="disabled">disabled</button>

スニペットを実行するとサンプルを表示できます。

実現したいこと

チェックボックスの下記の状態に合わせて、アイコンの色を変えたいです。
・非チェック時
・チェック時
・disabled時

試したこと

:checked
上記ページを参考に、

input[type="checkbox"]:checked {
  color: red;
}

と書いてみましたが、効果はありませんでした。

また、disabled時のアイコンの色を変える場合は、JavaScriptで制御するしかないのでしょうか。

1 件の回答 1

0

:checked 擬似クラスは、 input 要素がチェックされたときの input 要素の装飾を行っています。よってこの記述は、 input 要素と隣接する i 要素の装飾には影響を及ぼしません。

input[type="checkbox"]:checked {
    color: red;
}

質問文の参考ページとなっている MDN にもあるように、隣接した要素を選択するためには隣接兄弟結合子 (+) を使用することが出来ます[1]。隣接兄弟結合子は、直前の要素の直後にある要素を選択します[2]。そのため、現状の HTML 構造では、 input 要素の状態によって i 要素を選択することは出来ません。そこで、 label 要素内の input 要素と i 要素の順番を入れ替える必要があります。

<label for="check" id="checkBtn">
    <input type="checkbox" id="check">
    <i class="fas fa-check fa-3x"></i>
</label>

そして、 HTML 構造を修正したあとは、隣接兄弟結合子を用いて i 要素の装飾を行えば、目的どおりのことが行なえます。

document.getElementById("disabled").onclick = function() {
  var obj = document.getElementById("check");
  if (obj.disabled === true) {
    obj.disabled = false;
    return;
  };
  obj.disabled = true;
};
html {
    text-align: center;
}

#checkBtn {
    cursor: pointer;
}

#check {
    display: none;
}

#check:checked + i {
    color: red;
}

#check:disabled + i {
    color: blue;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<label for="check" id="checkBtn">
    <input type="checkbox" id="check">
    <i class="fas fa-check fa-3x"></i>
</label>
<button id="disabled">disabled</button>


蛇足ですが、 Selectors Level 4 に記述されている :has 擬似クラスを使うことで、 HTML 構造を変化させることなく i 要素を選択出来ます[3]。しかし、 :has 擬似クラスは現在すべてのモダンブラウザで実装されていないため、まだ使用することが出来ません[4]

i:has(>input:checked) {
    color: red;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。