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

**URL:** <https://community.cybozu.dev/t/topic/8539>\
**Category:** kintone 開発相談\
**Created:** [2024 年 1 月 5 日午後 2:40 UTC](https://community.cybozu.dev/t/topic/8539 "2024-01-05T14:40:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sugita](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@sugita](https://community.cybozu.dev/u/sugita)\
**Post date:** [2024 年 1 月 5 日午後 2:40 UTC](https://community.cybozu.dev/t/topic/8539/1 "2024-01-05T14:40:19Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2024 年 1 月 9 日午前 8:22 UTC](https://community.cybozu.dev/t/topic/8539/2 "2024-01-09T08:22:57Z")

</div>

```javascript
(() => {
    "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;
    }];
})();

```

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/9b1407c1f4b41a4a29eac8088e74c165fdb4f3fd.png)

---

<div class="post-metadata">

**Author:** ![sugita](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@sugita](https://community.cybozu.dev/u/sugita)\
**Post date:** [2024 年 1 月 9 日午前 9:37 UTC](https://community.cybozu.dev/t/topic/8539/3 "2024-01-09T09:37:44Z")

</div>

aaa様

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

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

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2024 年 1 月 10 日午前 12:42 UTC](https://community.cybozu.dev/t/topic/8539/4 "2024-01-10T00:42:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sugita](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@sugita](https://community.cybozu.dev/u/sugita)\
**Post date:** [2024 年 1 月 10 日午前 11:38 UTC](https://community.cybozu.dev/t/topic/8539/5 "2024-01-10T11:38:25Z")

</div>

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

.el-checkbox.is-disabled .el-checkbox\_\_inner {  
color:#000000;  
}

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

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2024 年 1 月 11 日午前 12:49 UTC](https://community.cybozu.dev/t/topic/8539/6 "2024-01-11T00:49:55Z")

</div>

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

> **[カスタマイズ](https://formbridge.kintoneapp.com/help/customize)**
>
> フォームブリッジ

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

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

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 1 月 16 日午前 4:55 UTC](https://community.cybozu.dev/t/topic/8539/7 "2024-01-16T04:55:38Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。