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を見つけることはできませんでした。



以上です。


seleniumテストの失敗、デバッグと引数と解決

seleniumテストが失敗する問題のデバッグと解決 ==== # TL;DR 関数名のtypoを修正すると、それまで通っていたテストが落ちる。 原因は、テストシステムが生成して渡した不正な引数による異常系終了だった。 対処として、テストケース実行を汚い実装で検出して特別に処理す...