フィールドの背景色を変えることは可能か（リッチエディター）

kintone カスタマイズ
1

質問になります。

disabledにしたフィールドの背景色を変えたく、

文字列（1行）と文字列（複数行）は以下css設定にて実装できましたが、

「リッチエディター」に対しても実装可能でしょうか？

指定の仕方が分からずです。ご教示頂けると幸いです。

@charset "UTF-8";

input[disabled],textbox[disabled]{
background-color: #EEEEEE !important;
-webkit-text-fill-color : blue !important;
}

textarea[disabled],textbox[disabled]{
background-color: #EEEEEE !important;
-webkit-text-fill-color : blue !important;
}
2

井俊さん

こんにちは。

 

リッチエディターの要素には「disabled」の属性がないため書き方が異なります。以下は一例です。

リッチエディターを構成するdiv要素が「input-text-outer-cybozu」「disabled-cybozu（disabledにした場合）」クラスを持っています。

編集領域は上記divの子要素divで「editor-cybozu」「cybozu-editor-seamless」クラスを持っています。

.input-text-outer-cybozu.disabled-cybozu .editor-cybozu.cybozu-editor-seamless {
  background-color: #EEEEEE !important;
}
3

Koichi様

ご回答ありがとうございます。

ご教示頂きました内容にて実現できました。

CSSの知識があまりなく、なぜ「．(ドット)」で連結して表記するのだろうか？

なんて思っているレベルですが、追ってCSSの方も勉強してみます。

この度は、ご親切に有難うございました。

4

芝山と申します。

モバイル版のリッチエディタの編集不可フィールドに対して、背景色等を変更したくトライしていますが

なかなか上手くいかないので御質問させていただきます。

Koichi様からご回答頂いた内容で、デスクトップ版のリッチエディタの文字色等を変えることが出来ましたが

モバイル版には適用されませんでした。

適用されない理由は、デスクトップ版とモバイル版でリッチエディタ構成要素に差異があるとかでしょうか？

1年前の投稿に対し便乗質問になってしまい申し訳ないですが、理由や解決方法など御教示頂けると大変助かります。

5

芝山さん

こんにちは。

 

回答参照いただきありがとうございます。

モバイルですとHTML構造が変わるため、クラスの指定方法が変わります。

 

/* リッチエディタの背景色を変える(モバイル) */
.forms-editor-gaia.disabled-field-gaia, .forms-editor-gaia.disabled-field-gaia div div {
  background-color: #EEEEEE !important;
}

「.forms-editor-gaia.disabled-field-gaia」だけですと枠線のみ色が変わるような見た目になります。

その配下のdivのさらに配下のdiv要素に対して色を指定してあげると、全体の見た目が変わります。

この辺りはブラウザのデベロッパーツールでHTMLを見てみてください。

6

koichi様

懇切丁寧にご回答いただきありがとうございます。

御教示内容でモバイル版のリッチエディタの背景色をカスタマイズすることが出来ました。

 

更にdiv要素の調べ方まで言及頂き、ブラウザでモバイル版のURLを開けば簡単に調べられることに気付きました。

早速、上記要素がどういう風になっているのかも合わせて確認してみたところ認識の解像度が上がり、大変助かりました。

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

7

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