入力欄のスタイル指定

最終更新日: 2022年3月23日
R8 | R9

入力欄へのスタイル適用は、"入力欄のみ" "入力欄を囲う領域" "両方" を指定することができます。

図1 入力欄へのスタイル適用

"入力欄" で実際に入力するタイミングでは、背景は白色となります。カーソルが移動すると、指定した背景色に変わります。

図2 入力時は背景は白色になる
図3 入力が終了すると再び背景色がセットされる

定義方法

「モデル項目詳細定義>入力制御>スタイル」を指定します。図2では全画面共通に設定していますが、画面毎に個別に指定することもできます。

入力欄にはCSSを直接、記述します。右側に用意された選択肢で、適用箇所を指定することができます。空白時は "入力欄のみ" となります。

background:beige
図4 スタイルの適用設定

ワンポイント

図2にあるように、CSSでは色名を直接、指定することもできます。

リストボックスの幅を指定する

登録・更新画面でリストボックスの幅を指定する場合は、width 指定を行います。単位はピクセル(px)や1文字分の高さ(em)を用いることができます。

width:50px
width:9em

適用箇所は空白とします。(空白時は、"入力欄のみ" で扱われます。)

具体的なサンプルは"入力制御 > 入力フィールド長 > リストボックスの場合"をお読みください。

日付型(カレンダ入力)

この設定は日付型(カレンダ入力)にも適用できます。 具体的なサンプルは"入力制御 > 入力フィールド長 > 日付型(カレンダ利用)の場合"をお読みください。

ラジオボタン・チェックボックスの高さを指定する

ラジオボタンやチェックボックスを格納する div 要素へのスタイルを指定することができます。図3では、高さを150pxとし、スクロールバーを用意する設定を行なった例です。

図5 div要素へのスタイル指定の例

定義方法

モデル項目の「入力制御 > スタイル」に次のように div{..} で囲って記述します。

div{height:150px;overflow-y:scroll;}
図6 スタイルの指定

チェックボックス・ラジオボタンの折り返し数

図3の例では、チェックボックス・ラジオボタンの折り返し数も指定しています。

図7 チェックボックス・ラジオボタンの折り返し数

レイアウト

図3の例では、二つの項目を横並びレイアウトで表示するようにしています。

図8 レイアウトの設定
図9 レイアウトの並び設定

他の設定との併用

div {...} 設定のあとに、続けて色の指定など、他のスタイルを指定することができます。div {...} で囲まれていないスタイルは、チェックボックス本体に適用されます。

正確には、チェックボックスを囲う span 要素にスタイルが適用されます。

次の例は文字色を赤とした例です。

div{height:150px;overflow-y:scroll;} color:red
図10 div要素とspan要素の両方を設定する

詳細画面への設定

"出力制御(スタイル)> CSSクラス名・スタイルの指定"をお読みください。

式を適用する

CSS記入欄に式を適用することもできます。Wagbyが用意する関数を利用できます。

IF(${age}>30,"background:beige","")

式を用いる場合の注意点は次のとおりです。

  • CSS部分はダブルクォーテーションで囲ってください。上の例のように、条件が成立しなかった場合は空文字列 ("") を返すようにします。
  • 入力画面へ適用する場合、トリガーとなる項目について「値変更時に画面を再描画する」設定を有効にするとよいでしょう。上の例では、age 項目に適用します。これにより age 項目の値を変更すると画面が再描画され、CSS が適用されるようになります。