初めて質問させていただきます。
入力不可となって灰色になった入力フォームの背景色を変えたいと思っています。
入力フォームにはリッチエディタを使用しています。
リッチエディタにはルックアップから情報を取得し表示しているので、
入力不可となり灰色になる訳ですが、その時の文字が見づらくて困っています。
入力不可なのは構わないのですが、背景の色だけ通常フォームと同じにしたいです。
なにか手段はあるでしょうか？
R・K さん
cstapの瀧ヶ平です。
すべての入力不可のリッチエディタの背景色を変えるだけであれば、CSSで
.disabled-cybozu .editor-cybozu {
background-color: #fff;
}
のように設定すれば対応できます。
特定のリッチエディタに指定したい場合は指定のリッチエディタの要素に対応するようにCSSセレクタを書けば可能です。
瀧ヶ平様ご回答ありがとうございます。
頂いたコードで実現できました。ありがとうございます。
CSSに関しては未経験なのでとても助かりました。
ですがまだ理想状態とは言えず、2点ほど問題があります。
まずは文字の色が真っ黒でないことが気になりました。
先ほどのソースに、
color: #000000;
と加えればいいかと思ったのですがうまく反映されませんでした。
フォントの色を変えるにはどうしたらいいのでしょうか。
次にリッチエディタに関してですが、
入力欄の上に装飾メニューみたいなものがありますがそれを非表示にすることは可能なのでしょうか。
以上、お手数おかけしますがご回答の程よろしくお願い致します。
R・K さん
colorの指定はimportantルールを使うしかなさそうですね。
また、装飾メニューも、.disabled-cybozu の子孫要素セレクタを用いて
.disabled-cybozu .goog-toolbar.goog-toolbar-horizontal {
display : none;
}
のようにすれば非表示にできます。また非表示にした際に要素の高さが変動してしまうため、エディタ部分の要素の親要素のheightをinitialにすると良いでしょう。
以上をまとめたCSSを以下に記述しておきます。参考にしていただければ幸いです。
.disabled-cybozu .editor-cybozu, .disabled-cybozu.input-text-outer-cybozu {
background-color: #fff;
color: #000 !important;
}
.disabled-cybozu .goog-toolbar.goog-toolbar-horizontal {
display: none;
}
.input-text-outer-cybozu.cybozu-ui-forms-editor-seamless{
height: initial !important;
}
瀧ヶ平様ご回答ありがとうございます。
頂いたコードで試してみたのですが、高さが元の入力欄よりも低かったです。
先ほどの回答に、
>また非表示にした際に要素の高さが変動してしまうため、
>エディタ部分の要素の親要素のheightをinitialにすると良いでしょう。
とありましたがその部分の問題なのでしょうか。
現在はサイズを直接pxで指定しています。
まず、initialがなんなのか、それ以前にCSS全体の処理も把握できておらずという状況です。
kintoneのCSSに関して参考資料などはあるのでしょうか。
R・K さん
initialは親要素の値を引き継がずにプロパティの初期値を利用するキーワードです。
ツール群の要素を非表示にすると、エディタ部分がそのまま上に詰めてしまうので覆っている親要素のサイズを変更するようにしいます。
高さが気になるようであればエディタ部分の要素のheightを直接px指定でも良いと思います。
また、調べたところkintoneのCSSについては参考資料は見つからなかったのですが、ブラウザの開発者ツールなどで目的の要素に適用されているCSSを調べ、その上からCSSルールを加える形ですので一般的なCSSが書ければ問題ないと思います。
瀧ヶ平様ご回答ありがとうございます。
サイズは直接指定する方法でいきたいと思います。
また、参考資料が無いということで、まずはCSSの勉強に励みたいと思います。
今回の問題は無事解決できましたので改めてお礼を申し上げます。
ありがとうございました。またなにかありましたらよろしくお願い致します。