新規投稿
フォローする

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

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

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

以前、上記でラベルの背景色の変更をご教示いただきまして実装ができたのですが、、

kviewerルックアップフィールドがあると、画像のフィールド2のように入力欄も色が変わってしまいます。

こちらの解決方法はありますでしょうか?

ご教示よろしくお願いいたします。

0

9件のコメント

Avatar
koichi

小林花子さん

こんにちは。

 

以前の回答の修正になりますが、以下に変更してみていただけますか。

括弧内の数字はそれぞれの行目・番目に合わせてください。

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

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

 

また、上記で改善しない場合、ルックアップはどの位置に配置されていますでしょうか。

0
Avatar
小林花子

koichiさま

 

ご教示いただいたもので試してみましたが、質問時と同じように入力欄にも色がついてしまっていました。

ルックアップ自体は、上記画像のフィールド2の右隣になります。

少しだけ写っております青いものがそうです。

0
Avatar
koichi

実際のコードを載せていただくこと可能でしょうか。

他のコードか、フォームの作りが影響している可能性があります。

 

私の環境ですと、上記コードで以下のようになりました(ラベルのみ色付き)。

0
Avatar
小林花子

ほかのcssの設定を外して試してもみましたが、投稿時と同じように指定個所以外も色が変わってしまいました。.

また、cssで設定しているコードは、下記になります。

①ラベルの背景色

.ui.stackable.grid >.row:nth-of-type(9) div:nth-of-type(1) {
    background-color: #f5f5f5;
}
小林花子により編集されました
0
Avatar
koichi

コードありがとうございます。

最初の画像のラベルとテキストフィールドの色が違うように見えます。

 

ラベルは「#f5f5f5」→CSSに定義あり

テキストフィールドは「#f9f9f9」→CSSに定義なし

フィールドの設定で「編集不可にする」にチェックが入っていないでしょうか。

0
Avatar
小林花子

ご認識の通りフィールド2のテキストフィールドには編集不可設定をしております。

また、フィールド3もラベル、テキストフィールド、ルックアップという並びは同じでして、

こちらは条件分岐がないためラベルの背景色の指定がJavaScriptで指定しています。

フィールド2と同様に編集不可ではありますが、画像のようにテキストフィールドの背景色に変化はありませんでした。

 

先程、cssで編集不可フィールドの背景色を指定して試してもみましたが、

フィールド2の背景色に変化もありませんでした。。

0
Avatar
koichi

一つ前の投稿の以下部分を変更するといかがでしょうか。

①ラベルの背景色

.row:nth-of-type(9) > div:nth-of-type(1) 

「>」を入れています。

.ui.stackable.grid > .row:nth-of-type(9) > div:nth-of-type(1) {
    background-color: #f5f5f5;
}
0
Avatar
小林花子

ご教示いただいた「>」をいれて試したところテキストフィールドの色が変わらなくなりました!

何度も確認していただきありがとうございました。。

 

1
Avatar
koichi

解決され良かったです!

0
サインインしてコメントを残してください。