checkboxがdisableのときcssでlabelテキストの色を変更する

cssでcheckboxがdisableのときlabelテキストの色を変更したかったのですが、日本語で一発これという設定がなかったので探してみました。
checkboxが無効であるときは、ラベル文字列を含めて、チェックボックス全体が無効を示す色になっていたほうが、ユーザにとってわかりやすく使いやすいと思います。
他にCSSで装飾するかどうかは、その後でいいかと。

いまelectronで書いている、UML sequence diagramエディタで使っています。

html checkbox 赤がDisable 青がEnable

まずHTML側で、対応するcheckboxの書き方をする必要があります。
===
                    <label for='editor__message-spec'>
                        <input id='editor__message-spec' type="checkbox"/>
                        <span>Spec</span>
                    </label>
===
続いてCSS。
===
 input[type="checkbox"][disabled] + span{
    color: #707070;
}
===

以下、いくつかの理由とTIPS。
(ここで、ラベル文字列とlabel elementはそれぞれ別のものです。)

ラベル文字列をspanで囲っているのは、inputの次の要素をCSS selectorの"+"(プラス)記法で指定することで、ラベル文字列のcolorを設定するためです。

全体をlabelで囲います。
labelで囲んでfor attributeでIDを使ってinput checkboxと紐付けすることで、ラベル文字列をクリックしてもcheckboxが操作できるようになり、ユーザにとって押しやすいcheckboxになるのこと。

ちなみに試したのですが、 下記HTMLのような
`<input id='editor__message-spec' type="checkbox">Spec</>`
という書き方で、input elementで囲ったテキストの色を変えるCSSを見つけることはできませんでした。

以上です。