<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.

Image of the DOM relationship for the zg-select web component tag

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.

ZGSelect CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-select-arrow-border0Styles the border of the select arrow button
--zg-select-arrow-border-bottomvar(--zg-select-arrow-border, 0)Styles the bottom border of the select arrow button
--zg-select-arrow-border-leftvar(--zg-select-arrow-border, 1px solid var(--theme-border-color))Styles the left border of the select arrow button
--zg-select-arrow-border-rightvar(--zg-select-arrow-border, 0)Styles the right border of the select arrow button
--zg-select-arrow-border-topvar(--zg-select-arrow-border, 0)Styles the top border of the select arrow button
--zg-select-arrow-color#000Sets the color select arrow icon
--zg-select-backgroundBrowser's default valueStyles the background of the entire select parent wrapper
--zg-select-border1px solid var(--theme-border-color))Styles the border of the select
--zg-select-border-bottomvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the bottom border of the select
--zg-select-border-leftvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the left border of the select
--zg-select-border-rightvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the right border of the select
--zg-select-border-topvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the top border of the select
--zg-select-colorvar(--zing-grid-color, var(--theme-color))Sets the font color of the select
--zg-select-color_activeSets the font color of the select option
--zg-select-font-familyBrowser's default valueSets the font family of the select option
--zg-select-font-sizeBrowser's default valueSets the font size of the select option
--zg-select-font-weightBrowser's default valueSets the font weight of the select option
--zg-select-height28pxSets the minimum height of the select
--zg-select-line-heightBrowser's default valueSets the line height of the select option
--zg-select-min-widthBrowser's default valueSets the minimum width of select
--zg-select-outlineinheritSets the outline of the select option
--zg-select-text-background#fffStyles the background of the 'text' portion of the zg-select element
--zg-select-transformBrowser's default valueSets the transform of the select option
--zg-select-trigger-backgroundvar(--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>]