お世話になっております。
以前、上記でラベルの背景色の変更をご教示いただきまして実装ができたのですが、、
kviewerルックアップフィールドがあると、画像のフィールド２のように入力欄も色が変わってしまいます。
こちらの解決方法はありますでしょうか？
ご教示よろしくお願いいたします。
小林花子さん
こんにちは。
以前の回答の修正になりますが、以下に変更してみていただけますか。
括弧内の数字はそれぞれの行目・番目に合わせてください。
/* 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;
}
また、上記で改善しない場合、ルックアップはどの位置に配置されていますでしょうか。
koichiさま
ご教示いただいたもので試してみましたが、質問時と同じように入力欄にも色がついてしまっていました。
ルックアップ自体は、上記画像のフィールド２の右隣になります。
少しだけ写っております青いものがそうです。
実際のコードを載せていただくこと可能でしょうか。
他のコードか、フォームの作りが影響している可能性があります。
私の環境ですと、上記コードで以下のようになりました（ラベルのみ色付き）。
ほかのcssの設定を外して試してもみましたが、投稿時と同じように指定個所以外も色が変わってしまいました。.
また、cssで設定しているコードは、下記になります。
①ラベルの背景色
.ui.stackable.grid >.row:nth-of-type(9) div:nth-of-type(1) {
background-color: #f5f5f5;
}
コードありがとうございます。
最初の画像のラベルとテキストフィールドの色が違うように見えます。
ラベルは「#f5f5f5」→CSSに定義あり
テキストフィールドは「#f9f9f9」→CSSに定義なし
フィールドの設定で「編集不可にする」にチェックが入っていないでしょうか。
ご認識の通りフィールド２のテキストフィールドには編集不可設定をしております。
また、フィールド３もラベル、テキストフィールド、ルックアップという並びは同じでして、
こちらは条件分岐がないためラベルの背景色の指定がJavaScriptで指定しています。
フィールド２と同様に編集不可ではありますが、画像のようにテキストフィールドの背景色に変化はありませんでした。
先程、cssで編集不可フィールドの背景色を指定して試してもみましたが、
フィールド２の背景色に変化もありませんでした。。
一つ前の投稿の以下部分を変更するといかがでしょうか。
①ラベルの背景色
.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;}
ご教示いただいた「>」をいれて試したところテキストフィールドの色が変わらなくなりました！
何度も確認していただきありがとうございました。。
解決され良かったです！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。