Select

Select

Native select styling for @bnotk/dsx, using modern Chrome-only picker features.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/select.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Browser target

This module is intentionally written for Chrome 138 / Electron 37.6 and relies on appearance: base-select, ::picker-icon, and ::picker(select).

Classes

Class	Purpose
.dsx-select	Base styled native <select>
.dsx-select--error	Error border modifier for invalid selects

Use the modifier together with the base class: class="dsx-select dsx-select--error".

States and behavior

• Default inset border uses var(--ds2-color-grey-4).
• :hover changes the inset border to var(--ds2-color-main).
• :focus uses a 2px inset focus ring with var(--ds2-color-focus).
• :disabled uses var(--ds2-color-grey-2)/var(--ds2-color-grey-3) and cursor: not-allowed.
• ::picker-icon is colored with var(--ds2-color-main).
• ::picker(select) adds the dropdown panel border, radius, padding, white background, and var(--ds2-shadow-md).
• Checked options use var(--ds2-color-highlight-light).
• optgroup labels are semibold and var(--ds2-color-main).

Example

<select class="dsx-select">
  <option>Choose a team</option>
  <option>Planning</option>
  <option>Procurement</option>
</select>

Accessibility notes

• Keep the native <select> element for keyboard and screen-reader support.
• Always connect a visible <label>.
• Add aria-invalid="true" when using the error modifier.
• Use a disabled placeholder option when the field requires an explicit choice.