【フォームブリッジ】編集不可チェックボックス 文字色

[sugita]

フォームブリッジのフォームでチェックボックスを編集不可に設定すると文字色が薄くなってしまい、見づらくなってしまいます。

そこでフォントの色を濃くしたいのですが、チェックボックスの場合、編集不可文字色を濃く設定するにはどう記述すれば良いでしょうか。

ご教授いただけたらと思います。

[aaa]

(() => {
    "use strict";
    fb.events.form.mounted = [state => {
        const targets = document.querySelectorAll('.el-checkbox__label');
        targets.forEach(target => {
            target.style.color = "black";
            target.style.opacity = "1";
        })

        return state;
    }];
})();

[sugita]

aaa様

ご教授いただき、ありがとうございます。
編集不可の文字色が濃くなり、見やすくなりました。
ただ、選択しているが薄いままなので、どちらを選択しているのか
分かりずらいままとなってしまっています。

選択しているチェックボックスの項目も濃くすることは可能でしょうか。

[aaa]

• 試行錯誤した痕跡を示してみてもらえますか？
  • どのような方針で進めますか？
  • チェックボックスの四角の要素は何という名前ですか？
  • どのように調べますか？

[sugita]

CSSでチェックボックスの枠を黒くする例があり、こちらに編集不可の
チェックボックスに変更すればよいかと思い試してみましたが、
駄目でした。

.el-checkbox.is-disabled .el-checkbox__inner {
color:#000000;
}

CSSではなく、jsで対応する方が良いのでしょうか。

[aaa]

CSSでできないかどうかはわからないですが

カスタマイズ

「個別フィールドのスタイルの変更は、CSSではなくJavaScriptで行って下さい。」
とありました。

JavaScriptで、試してみましょう。

• ChatGPTなどを利用する手もあります。
• 過去ログに参考になる投稿はありませんか？