Base Select Picker
The appearance: base-select value opts into the new customisable <select> rendering. Combined with ::picker(select), ::picker-icon, and ::checkmark pseudo-elements, you can fully style native select dropdowns without JavaScript.
Browser Support
appearance: base-select is supported in Chromium browsers only. Firefox support is in progress. These utilities and variants will be silently ignored in unsupported browsers.
Import
Included in @import 'tw-jib-css/experimental'. To import individually:
@import 'tw-jib-css/experimental/picker';Quick Reference
| Class | Styles |
|---|---|
| appearance-base-select | appearance: base-select |
| picker:{utility} | Targets ::picker(select) — the dropdown popup |
| picker-icon:{utility} | Targets ::picker-icon — the dropdown arrow |
| checkmark:{utility} | Targets ::checkmark — the selected-item indicator |
Basic Usage
Apply appearance-base-select to a <select> element to opt into customisable rendering:
Fully Styled Select
Use the custom variants to style every part of the select:
Custom Variants
picker:*
Targets the dropdown popup via ::picker(select). Automatically sets appearance: base-select on the parent <select>.
picker-icon:*
Targets the dropdown arrow icon via ::picker-icon. Also auto-sets appearance: base-select.
checkmark:*
Targets the ::checkmark pseudo-element that appears next to the selected option.