現状
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で制御するしかないのでしょうか。