日付時刻ピッカーコントロールのCSS
本製品の日付時刻ピッカーコントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下のコントロールに適用されます。
日付時刻ピッカー（GcDateTimePicker）
ドロップダウンピッカー（GcDropDownPicker：日付時刻コントロールのドロップダウンピッカー）
全般
対象：日付時刻ピッカー、ドロップダウンピッカー
CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim-date-time-picker__outter （日付時刻ピッカーのコンテナのスタイル） | 背景（色、画像など） | background, background-color, background-image |
境界線 | border, border-color, border-style, border-width | |
角丸 | border-radius | |
サイズ | width, height | |
.gcim-date-time-picker__picker （日付選択領域のスタイル） | 背景（色、画像など） | background, background-color, background-image |
表示位置 | margin | |
.gcim-date-time-picker__item （アイテムのテキストスタイル） | フォント | font, font-size, font-familyなど |
文字色 | color | |
.gcim-date-time-picker__selected-column-line （選択したアイテムの背景スタイル） | 境界線 | border-top, border-bottom |
背景（色、画像など） | background, background-color, background-image | |
サイズ | width, height | |
.gcim-date-time-picker__item[Gc_pickerItem_isSelected="true"] （選択したアイテムのテキストのスタイル） | フォント | font, font-size, font-familyなど |
文字色 | color | |
.gcim-date-time-picker__item[Gc_pickerItem_isDisabled="true"] （無効な選択アイテムのテキストのスタイル） | フォント | font, font-size, font-familyなど |
文字色 | color | |
.gcim-date-time-picker__tab-label （タブ領域のスタイル） | 境界線 | border, border-color, border-style, border-width |
角丸 | border-radius | |
背景（色、画像など） | background, background-color, background-image | |
.gcim-date-time-picker__tab （タブのスタイル） | フォント | font, font-size, font-family, font-weightなど |
文字色 | color | |
境界線 | border, border-color, border-style, border-width | |
角丸 | border-radius | |
背景（色、画像など） | background, background-color, background-image | |
.gcim-date-time-picker__tab--active （選択中のタブのスタイル） | フォント | font, font-size, font-family, font-weightなど |
文字色 | color | |
境界線 | border, border-color, border-style, border-width | |
角丸 | border-radius | |
背景（色、画像など） | background, background-color, background-image |
ドロップダウンピッカー
ドロップダウンピッカーには上記のスタイルに加え、以下のスタイルを設定できます。
CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
.gcim-date-time-picker__drop-down-container （ドロップダウンピッカーのコンテナのスタイル） | 境界線 | border, border-color, border-style, border-width |
角丸 | border-radius | |
背景（色、画像など） | background, background-color, background-image | |
.gcim-date-time-picker__button--ok （ドロップダウンピッカーのOKボタンのスタイル） | フォント | font, font-size, font-family, font-weightなど |
文字色 | color | |
境界線 | border, border-color, border-style, border-width | |
角丸 | border-radius | |
背景（色、画像など） | background, background-color, background-image | |
表示位置 | margin |