編集不可フィールドの背景色の変更方法について（ご質問）

kintone カスタマイズ
1

下図は、javascriptでapp.record.edit.show’,'app.record.create.showイベント発生時に、利用者による編集を避ける為、'disabled = true’で編集不可にしたフィールドの例です。

ところが、入力時（画面表示時）に、非常に見にくくなってしまいます。
このため、背景色を’白’または淡い背景色に変更したいと思いますが、何か良い方法がないか、ご教示願います。

2 
[...document.getElementsByClassName('disabled-cybozu')].forEach((el) => {
    el.firstChild.style.backgroundColor = '#FFF';
});

または

.disabled-cybozu input {
background-color: #FFF;
}

こちらで可能かと思いますが、あくまでkintoneのclass名を取得したDOM操作になります（アップデートによりclass名が変わった場合無効になります）ので注意して下さい。

3

CSSで下記内容を登録するとすべての編集不可フィールドの背景色が白になりました。

input[disabled],textbox[disabled]{
background-color: #fff !important;
}

ありがとうございました。

 

4

mls-hashimoto様
本件、編集不可にしたテキストフィールドに対し、デフォルト背景色である灰色を、利用者に見やすくするために背景色を白にかえたいということで、前回までは、下記のCSSを適用することで実現できていました。

input[disabled],textbox[disabled]{
background-color: #fff !important;
}

ところが、２列目のテキストフィールドを、テキスト（１行）からテキスト（複数行）に変更すると、このCSSが効かなくなり、２列目のテキスト（複数行）の背景色が白にできなくなりました。

CSSの内容が’textbox’となっていますが、テキスト（複数行）に変更することで、CSS内容をどのように変更すべきかご教示いただけないでしょうか。

5

44key さま

文字列（複数行）フィールドはtextboxではなくtextareaです。

6

mls-hashimoto様
有難うございました。
textareaを加えることでテキスト（1行）とテキスト（複数行）の背景色をコントロールできました。

input[disabled],textbox[disabled]{
background-color: #fff !important;
}

textarea[disabled],textbox[disabled]{
background-color: #fff !important;
}

 

 

7

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