【フォームブリッジ】CSSで項目を指定したい

お世話になっております。

フォームブリッジに関する質問です。

 

CSSを使って特定の項目の項目名にだけ背景色をつけたり、特定の項目の入力欄にだけ色をつけたりしたいと考えています。

項目名については.ui.form .field>label{} で全ての項目をまとめて指定することはできたのですが、特定の項目を指定する方法がわからないため実装できずにいます。

上記のような仕様を実装することは可能でしょうか?可能であれば方法をご教示頂きたいです。

よろしくお願いいたします。

nakaさん
cstapの瀧ヶ平です。

特定の項目にだけCSSを指定するのであればJSカスタマイズの方が簡単に出来るかと思います。

例えば、フィールドコードが「文字列__1行」のフィールドの背景色を赤に指定する場合は

fb.events.form.created = [function(state) {
state.fields
.find(function(field) {
return field.code === "文字列__1行";
}).style.backgroundColor = "red";
return state;
}];

のようにイベントハンドラを書けば可能です。

瀧ヶ平さん

 

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

ご教示頂いた方法で特定の項目を指定することができました。

ここから項目の中身全体ではなく、ラベル部分のみの背景色を変えるようなことは可能でしょうか?

可能であれば書き方をご教示頂けると幸いです。

よろしくお願いいたします。

nakaさん

その場合はCSSの方が良いですね

form .row:nth-child(1) > div:nth-child(1) > label {
background: red;
}

の様な形で、フォームの1行目の1つ目の要素のラベルに対してスタイルを指定できます。

こういった細々したCSSのセレクタは難しいので一度MDNのリファレンスなどに目を通しておくことをおすすめします

瀧ヶ平さん

 

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

ご教示頂いたサンプルコードを元に、変更したい項目のラベルの色を変更することができました。

また、リファレンスの方も読み込んでおこうと思います。

 

この度は誠にありがとうございました。

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