# 【FormBridge】ラベルの背景色の変更方法について

**URL:** <https://community.cybozu.dev/t/topic/6060>\
**Category:** kintone 開発相談\
**Created:** [2022 年 6 月 13 日午前 9:04 UTC](https://community.cybozu.dev/t/topic/6060 "2022-06-13T09:04:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1628](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@Legacy\_Account1628](https://community.cybozu.dev/u/Legacy_Account1628)\
**Post date:** [2022 年 6 月 13 日午前 9:04 UTC](https://community.cybozu.dev/t/topic/6060/1 "2022-06-13T09:04:35Z")

</div>

FormBridgeで一部のラベルの背景色を変更したりするのJavaScriptで実行しています。

基本的には実装できたのですが、条件分岐を設定したところ条件分岐後に表示される

指定のラベルの背景色が変更されなくなってしまいました。

条件分岐後のラベルの背景色も変更する方法はありませんでしょうか。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 6 月 15 日午前 5:07 UTC](https://community.cybozu.dev/t/topic/6060/2 "2022-06-15T05:07:34Z")

</div>

小林花子さん

こんにちは。

&nbsp;

条件分岐に指定したフィールドのchangeイベント内で処理すればいけるかなと思いましたが、タイミングの問題でだめでした。

ということで、CSSでの対応を回答します。

&nbsp;

フォーム画面は行ごとに「row」クラスが付いています。

ラベルは「ql-editor」クラスが付いています。

条件分岐で非表示になっても、HTML上の行は保持されますので、あらかじめ何番目にあるかをCSSで指定しておけば色変更可能と思います。

```
/* 1行目にあるラベル */
.row:nth-of-type(1) .ql-editor p {
  background-color: #ff0000;
}

/* 2行目にあるラベル */
.row:nth-of-type(2) .ql-editor p {
   background-color: #ff00ff;
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1628](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@Legacy\_Account1628](https://community.cybozu.dev/u/Legacy_Account1628)\
**Post date:** [2022 年 6 月 15 日午前 5:47 UTC](https://community.cybozu.dev/t/topic/6060/3 "2022-06-15T05:47:27Z")

</div>

koichiさま

ご教示ありがとうございます。

条件分岐後の項目が複数あるのですが、

その場合はご教示の通りcssで各行ひとつずつ指定するという方法でいいのでしょうか。

また、試しにcssを投入してみたところ、

ラベルに入力した文字の行に背景色がつくようになりました。

JavaScriptで指定しますと、横に配置しているフィールドの幅合わせて背景色もついていたのですが、そちらはまた指定の仕方が違うのでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 6 月 15 日午前 6:25 UTC](https://community.cybozu.dev/t/topic/6060/4 "2022-06-15T06:25:55Z")

</div>

ご確認いただきありがとうございます。

対象フィールドが複数ある場合は、その行分（あるいはフィールド数分）をCSSで指定する必要があります。

&nbsp;

> JavaScriptで指定しますと、横に配置しているフィールドの幅合わせて背景色もついていたのですが、そちらはまた指定の仕方が違うのでしょうか。

背景色の範囲について私の認識が誤っているかもしれません。

JavaScriptでできるならCSSでも同じようにできるはずですので、CSSのセレクタ部分を変えることで、それに応じた範囲に色を付けることは可能です。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1628](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@Legacy\_Account1628](https://community.cybozu.dev/u/Legacy_Account1628)\
**Post date:** [2022 年 6 月 15 日午前 7:26 UTC](https://community.cybozu.dev/t/topic/6060/5 "2022-06-15T07:26:14Z")

</div>

行数分指定とのことで承知いたしました。

&nbsp;

こちらに関しましてもご教示ありがとうございます。

css/JavaScriptに関しましては初心者なので申し訳ないのですが、この場合はpをdivに変えるような感じになるのでしょうか。

> JavaScriptでできるならCSSでも同じようにできるはずですので、CSSのセレクタ部分を変えることで、それに応じた範囲に色を付けることは可能です。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 6 月 15 日午前 7:59 UTC](https://community.cybozu.dev/t/topic/6060/6 "2022-06-15T07:59:15Z")

</div>

範囲を見たいのでJavaScriptで付けた背景色の画面キャプチャを投稿可能でしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1628](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@Legacy\_Account1628](https://community.cybozu.dev/u/Legacy_Account1628)\
**Post date:** [2022 年 6 月 15 日午前 8:43 UTC](https://community.cybozu.dev/t/topic/6060/7 "2022-06-15T08:43:54Z")

</div>

こちらがそれぞれで指定したものになります。

jsは下記のコード、cssはいただいたもので反映しています。

```
fb.getElementByCode('test_field').style.backgroundColor = '#87cefa';

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 6 月 15 日午後 11:08 UTC](https://community.cybozu.dev/t/topic/6060/8 "2022-06-15T23:08:19Z")

</div>

ありがとうございます。

おっしゃる通り、div要素ですね。

rowに対して「:nth-of-type」で何行目か

その配下のdivに対して「:nth-of-type」で何番目かを指定することでできます。

```
/* 1行目の1番目のdiv */
.row:nth-of-type(1) div:nth-of-type(1) {
    background-color: #ff00ff;
}

/* 1行目の2番目のdiv */
.row:nth-of-type(1) div:nth-of-type(2) {
    background-color: #0000ff;
}

/* 2行目の1番目のdiv */
.row:nth-of-type(2) div:nth-of-type(1) {
    background-color: #00ffff;
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1628](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@Legacy\_Account1628](https://community.cybozu.dev/u/Legacy_Account1628)\
**Post date:** [2022 年 6 月 16 日午前 2:15 UTC](https://community.cybozu.dev/t/topic/6060/9 "2022-06-16T02:15:41Z")

</div>

いただいた回答で試してみたところ想定通りのものになりました！

ご丁寧にありがとうございました。

---

<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 年 12 月 2 日午前 5:53 UTC](https://community.cybozu.dev/t/topic/6060/10 "2024-12-02T05:53:51Z")

</div>

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