【フォームブリッジ】編集不可フォームの文字色・サイズ・太字設定

kintone カスタマイズ
1

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

フォームブリッジのフォームで編集不可に設定すると文字色が薄くなってしまい、見づらくなってしまいます。

そこでフォントの色を濃く、大きく、太字に設定出来ればと思い試行錯誤した結果、フォントサイズを大きくする事は出来たのですが、色と太字設定が反映されません。

編集不可フィールドの文字色、太字設定をするにはどう記述すれば良いでしょうか。

(function() {

  "use strict";

  fb.events.form.mounted = [function (state) {

    const target = document.querySelector('[data-vv-name="フィールドコード"]');

    target.style.fontSize = '20px';

    return state;

  }];

})();
2

Y.SUGI様

お世話になっております。
トヨクモの江田です。

input要素を指定すると反映されるかと思います。

const target = document.querySelector('[data-vv-name="フィールドコード"] input');
3

江田篤史様

早々にご回答頂きありがとうございます。

お教え頂いたコードを基に下記のように設定してうまく反映出来ました。

(function() {
  "use strict";
  fb.events.form.mounted = [function (state) {
    const target = document.querySelector('[data-vv-name="フィールドコード"] input');
    target.style.fontSize = '20px';
    target.style.fontWeight = "bold";
    target.style.color = 'red';
    return state;
  }];
})();

いつもありがとうございます。

今後ともよろしくお願いいたします。

4

度々申し訳ございません。

先ほどお教え頂いたJSでうまく設定できたのですが、他にも同様の設定をしたい編集不可フォームがあり、

またJSだと他のJSと競合してしまう為CSSでまとめて設定できないでしょうか。

.el-input.is-disabled {
  font-size: larger !important;
  font-weight: bold !important;
  color: red !important;
}

色々と調べた結果、上記のように設定すればフォントサイズは反映されたのですが、

またしても太字と色の設定が出来ません。

どのように記述すれば編集不可フィールドのすべてに反映させる事が出来るでしょうか。

5

Y.SUGI様

お世話になっております。
返信が遅くなり申し訳ございません。

こちらもinput要素まで指定すると反映されるかと思います。

.el-input.is-disabled input {  
 ...  
}

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

6

江田篤史様

いつもお世話になっております。

お返事が遅くなりまして申し訳ございません。

無事まとめて設定する事が出来ました、ありがとうございます。

7

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