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



以上です。


0 件のコメント:

コメントを投稿

Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換する

 Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換することができるが、上手く変換されない場合がある。   以前作った魔法陣イラスト素材をイラスト素材ストックサイトへ登録しようと思い立ち、改めて素材用にラスタライズ変換をかけようとした。   ラスタライズ変換...