latest
latest
日付時刻ピッカーコントロールの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 |