<zg-select>
The <zg-select> tag is a web component that serves as the grid's custom dropdown and used as a CSS target for styling by the developer.. The <zg-select> web component should not be accessed specifically beyond styling.
Related Web Components
Usage
The <zg-select> element is a generated element added to <zg-pager> when the pager attribute is defined.
<zing-grid pager src="https://cdn.zinggrid.com/datasets/user-roles.json"> </zing-grid>
Attributes
There are no attributes available for the <zg-select> web component.
CSS Variables
<zg-select> can be styled with CSS variables, like so:
:root { --zg-select-background: red; }
Below is a list of all the associated <zg-select> CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-select-arrow-border | 0 | Styles the border of the select arrow button | ||
| --zg-select-arrow-border-bottom | var(--zg-select-arrow-border, 0) | Styles the bottom border of the select arrow button | ||
| --zg-select-arrow-border-left | var(--zg-select-arrow-border, 1px solid var(--theme-border-color)) | Styles the left border of the select arrow button | ||
| --zg-select-arrow-border-right | var(--zg-select-arrow-border, 0) | Styles the right border of the select arrow button | ||
| --zg-select-arrow-border-top | var(--zg-select-arrow-border, 0) | Styles the top border of the select arrow button | ||
| --zg-select-arrow-color | #000 | Sets the color select arrow icon | ||
| --zg-select-background | Browser's default value | Styles the background of the entire select parent wrapper | ||
| --zg-select-border | 1px solid var(--theme-border-color)) | Styles the border of the select | ||
| --zg-select-border-bottom | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the bottom border of the select | ||
| --zg-select-border-left | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the left border of the select | ||
| --zg-select-border-right | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the right border of the select | ||
| --zg-select-border-top | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the top border of the select | ||
| --zg-select-color | var(--zing-grid-color, var(--theme-color)) | Sets the font color of the select | ||
| --zg-select-color_active | Sets the font color of the select option | |||
| --zg-select-font-family | Browser's default value | Sets the font family of the select option | ||
| --zg-select-font-size | Browser's default value | Sets the font size of the select option | ||
| --zg-select-font-weight | Browser's default value | Sets the font weight of the select option | ||
| --zg-select-height | 28px | Sets the minimum height of the select | ||
| --zg-select-line-height | Browser's default value | Sets the line height of the select option | ||
| --zg-select-min-width | Browser's default value | Sets the minimum width of select | ||
| --zg-select-outline | inherit | Sets the outline of the select option | ||
| --zg-select-text-background | #fff | Styles the background of the 'text' portion of the zg-select element | ||
| --zg-select-transform | Browser's default value | Sets the transform of the select option | ||
| --zg-select-trigger-background | var(--zg-select-arrow-background) | Styles the background of the select arrow button (trigger) |
CSS Selector
<zg-select> can be styled by common CSS selectors, like so:
zg-select { background: red; }
Slots
There are no slots available for the <zg-select> web component.
[api: <zg-select>]