フォームブリッジ CSS ラベルの背景色 element.style

[bpj0138 (ああああ)]

特定のラベルに背景色をつけるにはどのようにすればよろしいでしょうか。
以下画像の通り、開発者ツールでは、特定のラベルが選択されているときのelement.styleに入れれば背景色を付けることができましたが、CSSを読み込む場合の要素がわかりませんでした。

宜しくお願い致します。

[y_minamitani9534 (Yuki_Minamitani)]

@bpj0138 さん

こちらにも回答させていただきますね！
恐らく画像の要素ですと

.el_form_item{
    width:100%!important;
    background-color:#f5f5f5 !important;
}

でいけるかなと思われます。

[bpj0138 (ああああ)]

ご回答ありがとうございます。

以下の通り、全てに適応されてしまいます。。。

[bpj0138 (ああああ)]

開発者ツールではelement.styleに入れたときのみ任意のラベルにスタイルを適応できたのですが、CSSで読み込むときにはelement.styleで特定できませんでした。

[y_minamitani9534 (Yuki_Minamitani)]

@bpj0138 さん

どこまでの範囲をそのようにされたいのですか？
全て変わるということは、全て.el_form_itemでclass名を設定されていると思います。
一度下記のように書き換えてみてもらっていいですか？

.el_form_item > .ql-editor{
    width:100%!important;
    background-color:#f5f5f5 !important;
}

もし解決しないのであれば、下記のリンクから確認してデバックしてみてください。
参考リンク：https://saruwakakun.com/html-css/reference/selector

[bpj0138 (ああああ)]

範囲は画像のラベルのみを希望しております。（フォーム内にはこのラベル以外にも複数ラベル含まれます）

[aaa]

ChromeデベロッパーツールのElemnetsのStyles
element.style{}はデバック目的に選択した項目をリアルタイムで編集できるように
したものだそうです。

参考URL
Chromeデベロッパーツール上でCSSを編集する方法

Chromeデベロッパーツール上でCSSを編集する方法

複数のel_form_itemがある場合は、cssを解釈するブラウザは選択された状態がわからないのですべてが同じ表示になります。

• 可能であれば、特定のel_form_itemだけにclassやidをつけるか
• nth-child または nth-of-typeのような順番で指定するか
• JavaScriptなどで順番を指定するか

などの選択肢になるそうです。

[bpj0138 (ああああ)]

お調べいただきありがとうございます。
表面的にできることだけをやっていたので、このような知識もなしに進んでおりました。
確認させていただき、わからない部分あればまたこの続きで投稿させていただきます。