リストコントロールのCSS
本製品のリストコントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
リストコントロール（GcListBox）
コンボコントロール（GcComboBox）のドロップダウンリスト
タグボックスコントロール（GcTagBox）のドロップダウンリスト
リストの1列目に表示するチェックボックス
コンボコントロール（GcComboBox）とタグボックスコントロール（GcTagBox）のツリービュー
全般
対象：リストコントロール、コンボコントロールのドロップダウンリスト、タグボックスコントロールのドロップダウンリスト
CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim__listbox （コントロールの基本スタイル） | 境界線 | border, border-color |
角丸 | border-radius | |
フォント | font-family, font-sizeなど | |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__listbox .column-header .column-header__inner （ヘッダー部分のスタイル） | フォント | font-family, font-sizeなど |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__listbox .column-header .column-header__sort-indicator[sort-state="asc"] div （昇順時のソートインジケータ） | インジケータの画像 | background-image |
.gcim__listbox .column-header .column-header__sort-indicator[sort-state="desc"] div （降順時のソートインジケータ） | インジケータの画像 | background-image |
.gcim__listbox .viewport .list-item （リストアイテムのスタイル） | フォント | font-family, font-sizeなど |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__listbox .viewport .list-item:hover （ホバー中のリストアイテムのスタイル） | フォント | font-family, font-sizeなど |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__listbox .viewport .list-item[focused="true"] （フォーカスがあるアイテムのスタイル） | フォント | font-family, font-sizeなど |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__listbox .viewport .list-item[selected="true"] （選択されているアイテムのスタイル） | フォント | font-family, font-sizeなど |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__listbox .footer_style （フッター部分のスタイル） | フォント | font-family, font-sizeなど |
文字色 | color | |
背景（色、画像など） | background, background-color, background-imageなど | |
フッターの高さ | hight | |
テキストの省略表示のスタイル | text-overflow（clip または ellipsis） | |
.gcim__listbox .corner （リストコントロールの右下角のスタイル） | 背景色 | background-color |
.gcim__listbox .corner[resize="true"] （リストコントロールのリサイズ可の場合の右下角のスタイル） | 背景（色、画像など） | background-color, background-image |
.gcim__listbox .grid-line--bottom--right （リストコントロールのグリッド線のスタイル） | 線の色、線種、太さ | border-right, border-bottom |
.gcim__listbox .resize-line （列のリサイズ線のスタイル） | 線の色、線種、太さ | border-left |
.gcim__listbox .text-truncate-style （テキストが表示幅を超えた場合の表示方法） | テキストの省略表示のスタイル | text-overflow（clip または ellipsis） |
.list_overlay （コントロール無効時のスタイル） | オーバーレイ（色、画像など） | background, background-color, background-image |
透過度 | opacity |
チェックボックス
対象：リストの1列目に表示するチェックボックス
CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim_checkbox .checkbox-span （非チェック時のチェックボックスのスタイル） | チェックボックスの枠 | border |
角丸 | border-radius | |
サイズ | width, height | |
.gcim_checkbox .checkbox:checked .checkbox-span （チェック時のチェックボックスのスタイル） | チェックボックスの枠 | border |
背景色 | background-color | |
.gcim_checkbox .checkbox-span::after （チェックマークのスタイル） | チェックの色 | border-color |
チェックの太さ | border-width | |
チェックの大きさ | width, height | |
表示位置 | top, left |
ツリービュー
対象：コンボコントロールとタグボックスコントロールのドロップダウンリストのツリービュー
CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim__treeview （ツリービューのスタイル） | フォント | font-family, font-sizeなど |
背景（色、画像など） | background, background-color, background-imageなど | |
境界線 | border, border-color | |
文字色 | color | |
.gcim__treeview .tree-item[isleaf='false'] > .item-switcher（ツリービューの展開ボタンのスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
.gcim__treeview .item-checkbox[state='checked'] （チェック時のチェックボックスのスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
.gcim__treeview .item-checkbox[state='unchecked']（非チェック時のチェックボックスのスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
.gcim__treeview .item-checkbox[state='indeterminate']（一部のアイテムがチェック時のチェックボックスのスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
.gcim__treeview .tree-item[focused="true"] > .item-content （フォーカス時のアイテムのスタイル） | 文字色 | color |
フォント | font-family, font-sizeなど | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__treeview .tree-item[selected="true"] > .item-content （チェック時のアイテムのスタイル） | 文字色 | color |
フォント | font-family, font-sizeなど | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__treeview .item-content:hover（ホバー時のアイテムのスタイル） | 文字色 | color |
フォント | font-family, font-sizeなど | |
背景（色、画像など） | background, background-color, background-imageなど | |
.gcim__treeview .indent-unit（インデントのスタイル） | 幅 | width |
.gcim__treeview .corner[resize='true']（リサイズコーナーのスタイル） | 背景の画像 | background-image |
.gcim__treeview .corner[show-scroll-bar='true'] （スクロールバー表示時のリサイズコーナーのスタイル） | 背景の画像 | background-image |
.indicator-wrapper（ローディング時のインジケーターのスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
.indicator-wrapper .loading-ring div（ローディング時のインジケーターのサイクルのスタイル） | 背景色 | background-color |
[gcim-control-appearance="modern"] .gcim__scroll-bar ::-webkit-scrollbar（スクロールバーのスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
[gcim-control-appearance="modern"] .gcim__scroll-bar ::-webkit-scrollbar-thumb（スクロールバーの矢印のスタイル） | 背景（色、画像など） | background, background-color, background-imageなど |
境界線の色 | border-color |