入力コントロールの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
.gcim__side-button:active (ドロップダウンボタンスタイル：押下時)	カーソル形状	cursor
.gcim__side-button_disabled (コントロール無効時のドロップダウンボタンスタイル)	透過度	opacity
.gcim__side-button_disabled (コントロール無効時のドロップダウンボタンスタイル)	背景色	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
.gcim__spin-button:active (スピンボタンスタイル：押下時)	カーソル形状	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
.gcim__spin-button__down:active (スピンダウンボタン：押下時)	カーソル形状	cursor
.gcim__spin-button__up (スピンアップボタン)	境界線	border, border-color, border-radiusなど
.gcim__spin-button__up:hover (スピンアップボタン：ホバー時)	背景色	background-color
.gcim__spin-button__up:active (スピンアップボタン：押下時)	幅	width
.gcim__spin-button__up:active (スピンアップボタン：押下時)	カーソル形状	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
.gcim-numeric-button:active (数字ボタン：押下時)	高さ	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

入力コントロールのCSS
全般
ウォーターマーク
ヘルプボタンのツールチップ
ドロップダウンボタン
スピンボタン
数値パッド
パスワードアイ
タッチツールバー