お世話になっております。
フォームブリッジに関する質問です。
CSSを使って特定の項目の項目名にだけ背景色をつけたり、特定の項目の入力欄にだけ色をつけたりしたいと考えています。
項目名については.ui.form .field>label{} で全ての項目をまとめて指定することはできたのですが、特定の項目を指定する方法がわからないため実装できずにいます。
上記のような仕様を実装することは可能でしょうか?可能であれば方法をご教示頂きたいです。
よろしくお願いいたします。
お世話になっております。
フォームブリッジに関する質問です。
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 日が経過したので自動的にクローズされました。新たに返信することはできません。