入力フィールドに背景色をつける方法

Q.

入力フィールドに背景色をつけることはできますか？

A. 

はい、可能です。

SkyVisualEditorでスタイルクラスを記述することで入力フィールドに背景色をつけることができます。

背景色をつけることで、例えば、読み取り専用にした入力フィールドに背景色をつけると以下のようになります。

以下で設定手順を紹介します。

なお、スタイルクラスに関してはSkyVisualEditorの標準サポートの対象外です。あらかじめ、ご了承ください。

1. 背景色を設定したい入力フィールドの選択
   SkyVisualEditor Studioで背景色を設定したい入力フィールドを選択を選択し、Studio右側のコンポーネントプロパティ内のIDを確認します。
   以下では、「Component119」がIDです。
   
   
   

2. ページスタイルの記述
   Studio右側のコンポーネントプロパティ内の[スタイルクラス]を選択します。
   
   
   スタイルクラスエディタが表示されますので、[ページスタイル編集]ボタンを押下します。
   ページスタイルエディタ画面で、以下のコードを記述します。

   .background-color{
   	background-color: #000000/*背景色として設定したいカラーコードを設定してください*/;
   	<!--枠線を指定する際は以下を記述してください。-->
   	border: 1px solid #000000/*枠線として設定したいカラーコードを設定してください*/;
   }

   
   以下は、背景色を#E6E6E6（薄い灰色）、枠線の色を#CCCCCC（灰色）と設定した際のコードです。

   カラーコードについては、こちらのリンクなどをご参考にしてください。

   
   

   

   ページスクリプトが記述できれば、[OK]をクリックします。
   
   

3. スタイルクラスの挿入
   最後に、2.で設定したページスタイルをスタイルクラスとして設定します。
   スタイルクラスのプルダウン項目より、先ほど作成したスタイルを選択し、[挿入]ボタンを押下します。
   挿入ができれば、[OK]をクリックし、設定は完了です。
   
   
   
4. デプロイ