特定の文字フィールドだけ、文字色と背景色を変更したい

kintone カスタマイズ
1

いつも大変お世話になっておりますm(_ _)m

CSSで特定の文字フィールドの文字と背景色を変えたいのですが、うまくいきません・・・

すべての文字フィールドの変更はできたのですが、個別に変える方法がわかりません。

.input-text-cybozu#31_8322541-:l0-text,
.input-text-cybozu#31_8328622-:kx-text,
.input-text-cybozu.label-8316315,
.input-text-cybozu.field-8316315,
.input-text-cybozu.value-8316315 

などいろいろくっつけてみたのですが、できませんでした。

なお、ラジオボタンの選択に応じて文字フィールドを非表示にしたいので、ラベルを使う方法は避けたいです（ラベルを非表示にできればいいのですが…こちらもやり方が分からず）。

また、javascriptでの色変更は編集画面中が適用されなかったので、こちらの方法も避けたいです。

 

やり方をご教示いただけると幸いです。宜しくお願いします。

 

■すべての文字フィールドの色変更

.input-text-cybozu{

    background-color: blue !important;
    color: red !important;

}
2

フロントエンド刷新があるかもしれないので、クラス名を使ってCSS当てるのはオススメできないです。

どうしても色を変えたいということであれば、kintone UI Component を使ってみるのはいかがでしょうか？

https://kintone-ui-component.netlify.app/

入力用に別途テキストボックスなどを用意して、
（やったことはないですが）条件に応じてJSで背景色変えるなんてのもできるかもしれないです。

3

らいと さま

ご回答ありがとうございます！
kintone UI Component、いじってみたいと思います！！

投稿３日後に回答がつかないと思って放置しておりました。
お礼が遅れまして申し訳ございません。

なお、たまたま、下記URLを発見してCSSで変更できました。
ご指摘の通り仕様変更で変わりそうな気もしますので（というか標準機能で実装してほしい…）、時間を見つけてkintone UI Componentで変更できるようにしたいと思います！

https://cybozudev.zendesk.com/hc/ja/community/posts/6571641249049–Kintone-%E7%B7%A8%E9%9B%86%E4%B8%8D%E5%8F%AF%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E9%BB%92%E5%AD%97%E5%8C%96

 

/* 編集時に入力不可フィールドの文字色、背景色を変更 */
.field-8322540 .disabled-cybozu > input, .field-8322540 .disabled-cybozu > textarea {
font-weight: bold;
    background-color: yellow !important;
        -webkit-text-fill-color: red !important;
              }

/* 編集時に入力可能フィールドの文字色、背景色を変更 */
      .value-8329118 .input-text-outer-cybozu > input, .value-8329118 .input-text-outer-cybozu > textarea {
        font-weight: bold;
            background-color: yellow !important;
                -webkit-text-fill-color: red !important;
              }
4

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