Global CSS API: Controls - Select
The following CSS custom properties are used for select control UI.
Native Select
Properties used for native select control UI.
| Property | Description | Default |
|---|---|---|
| Select | ||
| --gf-ctrl-select-icon | Icon. | var(--gf-icon-ctrl-select) |
| --gf-ctrl-select-icon-hover | Icon on hover. | var(--gf-ctrl-select-icon) |
| --gf-ctrl-select-icon-focus | Icon on focus. | var(--gf-ctrl-select-icon) |
| --gf-ctrl-select-icon-disabled | Icon on disabled. | var(--gf-ctrl-select-icon) |
| --gf-ctrl-select-icon-position | Icon position. | calc(100% - var(--gf-ctrl-padding-x)) center |
| --gf-ctrl-select-icon-size | Icon size. | 10px |
| --gf-ctrl-select-ms-expand | -ms-expand handling. | none |
| --gf-ctrl-select-padding-x | Horizontal (left/right) padding. | var(--gf-ctrl-padding-x) calc(var(--gf-ctrl-select-search-icon-size) + var(--gf-ctrl-padding-x)) |
| Multi-Select | ||
| --gf-ctrl-multiselect-height | Multi-select height. | 130px |
| --gf-ctrl-multiselect-radius | Multi-select border radius. | var(--gf-ctrl-radius-max-lg) |
| --gf-ctrl-multiselect-line-height | Multi-select line height. | 1.5 |
| --gf-ctrl-multiselect-padding-y | Multi-select vertical (top/bottom) padding. | var(--gf-padding-y) |
Enhanced UI Select
Properties used for enhanced select control UI.
| Property | Description | Default |
|---|---|---|
| Enhanced Select | ||
| --gf-ctrl-select-dropdown-border-color | Dropdown border color. | transparent |
| --gf-ctrl-select-dropdown-radius | Dropdown border radius. | var(--gf-ctrl-radius-max-md) |
| --gf-ctrl-select-dropdown-shadow | Dropdown box shadow. | 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03) |
| --gf-ctrl-select-dropdown-option-bg-color-hover | Dropdown option background color on hover. | var(--gf-color-in-ctrl-light-lighter) |
| --gf-ctrl-select-dropdown-option-shadow-hover | Dropdown option box shadow on hover. | |
| --gf-ctrl-select-search-icon-size | Search icon size. | var(--gf-icon-font-size) |
| --gf-ctrl-select-search-icon-position | Search icon position. | var(--gf-ctrl-padding-x) center |
| --gf-ctrl-select-search-padding-x | Search input horizontal (left/right) padding. | calc(var(--gf-ctrl-select-search-icon-size) + var(--gf-ctrl-padding-x) + 8px) var(--gf-ctrl-padding-x) |
| Enhanced Multi-Select | ||
| --gf-ctrl-multiselect-close-icon-size | Remove selected option icon size. | var(--gf-icon-font-size) |
| --gf-ctrl-multiselect-close-icon-inset-y-start | Remove selected option icon vertical start (top) position. | calc(50% - (var(--gf-ctrl-multiselect-close-icon-size) / 2)) |
| --gf-ctrl-multiselect-close-icon-inset-x-end | Remove selected option icon horizontal end (right) position. | calc((var(--gf-ctrl-padding-x) / 2) + 2px) |
| --gf-ctrl-multiselect-selected-item-bg-color | Selected option background color. | var(--gf-color-in-ctrl-primary) |
| --gf-ctrl-multiselect-selected-item-radius | Selected option border radius. | 33px |
| --gf-ctrl-multiselect-selected-item-color | Selected option color. | var(--gf-color-in-ctrl-primary-contrast) |
| --gf-ctrl-multiselect-selected-item-font-size | Selected option font size. | var(--gf-ctrl-font-size) |
| --gf-ctrl-multiselect-selected-item-font-weight | Selected option font weight. | var(--gform-theme-font-weight-semibold) |
| --gf-ctrl-multiselect-selected-item-remove-icon-color | Remove selected option icon color. | var(--gf-color-in-ctrl-primary-contrast) |