57845


## 現状

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

[code]

    document.getElementById("disabled").onclick = function () {
        var obj = document.getElementById("check");
        if (obj.disabled === true) {
            obj.disabled = false;
            return;
        };
        obj.disabled = true;
    };
[/code]

[code]

    html {
        text-align: center;
    }
    
    #checkBtn {
        cursor: pointer;
    }
    
    #check {
        display: none;
    }
[/code]

[code]

    <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>
[/code]

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

## 実現したいこと

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

## 試したこと

[:checked](https://developer.mozilla.org/ja/docs/Web/CSS/:checked)  
上記ページを参考に、

[code]

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

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

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


CC BY-SA 4.0
2019-09-04T06:28:49.340
57834
2019-09-04T14:33:53.437
2019-09-04T10:50:53.157
35433
35433
question
html css
チェックボックスの非チェック時、チェック時、disabled時のデザインを変更する方法


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

[code]

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

質問文の参考ページとなっている MDN にもあるように、隣接した要素を選択するためには **隣接兄弟結合子** (`+`)
を使用することが出来ます[[1]](https://developer.mozilla.org/ja/docs/Web/CSS/:checked#CSS)。隣接兄弟結合子は、直前の要素の
**直後** にある要素を選択します[[2]](https://drafts.csswg.org/selectors-3/#adjacent-
sibling-combinators)。そのため、現状の HTML 構造では、 `input` 要素の状態によって `i`
要素を選択することは出来ません。そこで、 `label` 要素内の `input` 要素と `i` 要素の順番を入れ替える必要があります。

[code]

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

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

[code]

    document.getElementById("disabled").onclick = function() {
      var obj = document.getElementById("check");
      if (obj.disabled === true) {
        obj.disabled = false;
        return;
      };
      obj.disabled = true;
    };
[/code]

[code]

    html {
        text-align: center;
    }
    
    #checkBtn {
        cursor: pointer;
    }
    
    #check {
        display: none;
    }
    
    #check:checked + i {
        color: red;
    }
    
    #check:disabled + i {
        color: blue;
    }
[/code]

[code]

    <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>
[/code]

* * *

蛇足ですが、 Selectors Level 4 に記述されている **`:has` 擬似クラス**を使うことで、 HTML 構造を変化させることなく
`i` 要素を選択出来ます[[3]](https://drafts.csswg.org/selectors-4/#relational)。しかし、
`:has`
擬似クラスは現在すべてのモダンブラウザで実装されていないため、まだ使用することが出来ません[[4]](https://caniuse.com/#search=%3Ahas)。

[code]

    i:has(>input:checked) {
        color: red;
    }
    
[/code]


CC BY-SA 4.0
2019-09-04T14:33:53.437
57845
2019-09-04T14:33:53.437
32986
57834
answer