入力コントロールのCSS
本製品の入力コントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
- テキストコントロール(GcTextBox)
- 複数行テキストコントロール(GcMultiLineTextBox)
- マスクコントロール(GcMask)
- コンボコントロール(GcComboBox)
- 数値コントロール(GcNumber)
- 日付時刻コントロール(GcDateTime)
全般
対象：すべての入力コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim (コントロールの基本スタイル) | 境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 幅 | width | |
| 高さ | height | |
| 文字色 | color | |
| 背景(色、画像など) | background, background-color, background-imageなど | |
| .gcim__input:disabled (コントロール無効時のスタイル) | 境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 幅 | width | |
| 高さ | height | |
| 透明度 | opacity | |
| 文字色 | color | |
| 背景(色、画像など) | background, background-color, background-imageなど | |
| .gcim_focused (フォーカス取得時のスタイル) | 境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 幅 | width | |
| 高さ | height | |
| 文字色 | color | |
| 背景(色、画像など) | background, background-color, background-imageなど |
ウォーターマーク
対象：すべての入力コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim_watermark_null (フォーカスがないときのウォーターマークのスタイル) | フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景色 | background-color | |
| .gcim_focused.gcim_watermark_null (フォーカス時のウォーターマークのスタイル) | フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景色 | background-color |
対象：日付時刻コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim_watermark_empty-era (フォーカスがなく和暦表示できないときのウォーターマークのスタイル) | フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景色 | background-color | |
| .gcim_focused.gcim_watermark_empty-era (フォーカス時の和暦表示できないときのウォーターマークのスタイル) | フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景色 | background-color |
対象：数値コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim_watermark_zero (フォーカスがなく値がゼロのときのウォーターマークのスタイル) | フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景色 | background-color | |
| .gcim_focused.gcim_watermark_zero (フォーカス時の値がゼロのときのウォーターマークのスタイル) | フォント | font-family, font-sizeなど |
| 文字色 | color | |
| 背景色 | background-color |
ヘルプボタンのツールチップ
対象：すべての入力コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__help-button_tip (ヘルプボタンのツールチップスタイル) | 境界線 | border, border-color, border-radiusなど |
| フォント | font-family, font-sizeなど | |
| 幅 | width | |
| 高さ | height | |
| 文字色 | color | |
| 背景(色、画像など) | background, background-color, background-imageなど |
ドロップダウンボタン
対象：すべての入力コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__side-button (ドロップダウンボタンスタイル) | 境界線 | border, border-color, border-radiusなど |
| .gcim__side-button:hover (ドロップダウンボタンスタイル：ホバー時) | 背景色 | background-color |
| .gcim__side-button:active (ドロップダウンボタンスタイル：押下時) | 幅 | width |
| カーソル形状 | cursor | |
| .gcim__side-button_disabled (コントロール無効時のドロップダウンボタンスタイル) | 透過度 | opacity |
| 背景色 | background-color | |
| .gcim-icon_drop-down (ドロップダウンボタンのマーク画像) | 背景画像 | background-image |
対象：日付時刻コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__side-button_drop-down-calendar (ドロップダウンカレンダーボタンスタイル) | 境界線 | border, border-color, border-radiusなど |
| .gcim__side-button_drop-down-calendar:hover (ドロップダウンカレンダーボタンスタイル：ホバー時) | 背景色 | background-color |
| .gcim__side-button_drop-down-calendar:active (ドロップダウンカレンダーボタンスタイル：押下時) | 幅 | width |
| カーソル形状 | cursor | |
| .gcim__side-button_drop-down-calendar:hover .gcim-icon_drop-down (ドロップダウンボタンのマーク画像：ホバー時) | 背景画像 | background-image |
| .gcim__side-button_drop-down-calendar:active .gcim-icon_drop-down (ドロップダウンボタンのマーク画像：押下時) | 背景画像 | background-image |
対象：数値コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__side-button_drop-down-numeric-pad (ドロップダウン数値パッドボタンスタイル) | 境界線 | border, border-color, border-radiusなど |
| .gcim__side-button_drop-down-numeric-pad:hover (ドロップダウン数値パッドボタンスタイル：ホバー時) | 背景色 | background-color |
| .gcim__side-button_drop-down-numeric-pad:active (ドロップダウン数値パッドボタンスタイル：押下時) | 幅 | width |
| カーソル形状 | cursor | |
| .gcim__side-button_drop-down-numeric-pad:hover .gcim-icon_drop-down (ドロップダウンボタンのマーク画像：ホバー時) | 背景画像 | background-image |
| .gcim__side-button_drop-down-numeric-pad:active .gcim-icon_drop-down (ドロップダウンボタンのマーク画像：押下時) | 背景画像 | background-image |
スピンボタン
対象：コンボ、数値、日付時刻、マスクコントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__spin-button (スピンボタンスタイル) | 境界線 | border, border-color, border-radiusなど |
| .gcim__spin-button:hover (スピンボタンスタイル：ホバー時) | 背景色 | background-color |
| .gcim__spin-button:active (スピンボタンスタイル：押下時) | 幅 | width |
| カーソル形状 | cursor | |
| .gcim__side-button_disabled .gcim__spin-button (コントロール無効時のスピンボタンスタイル) | 透過度 | opacity |
| 背景色 | background-color | |
| .gcim__spin-button__down (スピンダウンボタン) | 境界線 | border, border-color, border-radiusなど |
| .gcim__spin-button__down:hover (スピンダウンボタン：ホバー時) | 背景色 | background-color |
| .gcim__spin-button__down:active (スピンダウンボタン：押下時) | 幅 | width |
| カーソル形状 | cursor | |
| .gcim__spin-button__up (スピンアップボタン) | 境界線 | border, border-color, border-radiusなど |
| .gcim__spin-button__up:hover (スピンアップボタン：ホバー時) | 背景色 | background-color |
| .gcim__spin-button__up:active (スピンアップボタン：押下時) | 幅 | width |
| カーソル形状 | cursor | |
| .gcim-icon_spin-down (スピンダウンボタンのマーク画像) | 背景画像 | background-image |
| .gcim__spin-button__down:hover .gcim-icon_spin-down (スピンダウンボタンのマーク画像：ホバー時) | 背景画像 | background-image |
| .gcim__spin-button__down:active .gcim-icon_spin-down (スピンダウンボタンのマーク画像：押下時) | 背景画像 | background-image |
| .gcim-icon_spin-up (スピンアップボタンのマーク画像) | 背景画像 | background-image |
| .gcim__spin-button__up:hover .gcim-icon_spin-up (スピンアップボタンのマーク画像：ホバー時) | 背景画像 | background-image |
| .gcim__spin-button__up:active .gcim-icon_spin-up (スピンアップボタンのマーク画像：押下時) | 背景画像 | background-image |
数値パッド
対象：数値コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim-numeric-pad (数値パッド全体の基本スタイル) | 境界線 | border, border-color, border-radiusなど |
| 背景色 | background-color | |
| フォント | font-family, font-sizeなど | |
| 幅 | width | |
| 高さ | height | |
| .gcim-numeric-button (数字ボタンの基本スタイル) | 境界線 | border, border-color, border-radiusなど |
| .gcim-numeric-button:hover (数字ボタン：ホバー時) | 背景色 | background-color |
| .gcim-numeric-button:active (数字ボタン：押下時) | 幅 | width |
| 高さ | height | |
| .gcim-icon_back-space (BSボタンの画像) | 背景画像 | background-image |
パスワードアイ
対象：テキストコントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__fish-eye_normal (パスワードアイの画像) | 背景画像 | background-image |
| .gcim__fish-eye_hover (パスワードアイの画像：ホバー時) | 背景画像 | background-image |
| .gcim__fish-eye_pressed (パスワードアイの画像：押下時) | 背景画像 | background-image |
タッチツールバー
対象：すべての入力コントロール
| CSSクラス(概要) | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim__touch-tool-bar (タッチツールバー全体のスタイル) | 高さ | height |
| 境界線 | border | |
| 背景色 | background-color | |
| .gcim__touch-toolbar__button (タッチツールバーボタンのスタイル) | 背景色など | background-colorなど |
| .gcim__touch-toolbar__separator (ボタンセパレーターの色) | 背景色 | background-color |
| .gcim-icon_paste (「貼り付け」メニューの画像) | 背景画像 | background-image |
| .gcim-icon_cut (「切り取り」メニューの画像) | 背景画像 | background-image |
| .gcim-icon_copy (「コピー」メニューの画像) | 背景画像 | background-image |
| .gcim-icon_clear (「削除」メニューの画像) | 背景画像 | background-image |
| .gcim-icon_undo (「元に戻す」メニューの画像) | 背景画像 | background-image |
| .gcim-icon_select-all (「すべて選択」メニューの画像) | 背景画像 | background-image |