Base select picker
The appearance: base-select value opts a <select> into rendering you can reach. With the ::picker(select), ::picker-icon and ::checkmark pseudo-elements, you can style a native dropdown without JavaScript.
Browser Support
appearance: base-select is supported in Chromium browsers only. Firefox support is in progress. An engine without it ignores these utilities and variants.
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), and sets appearance: base-select on the parent <select> for you.
picker-icon:*
Targets the dropdown arrow via ::picker-icon, and also sets appearance: base-select.
checkmark:*
Targets the ::checkmark pseudo-element that appears next to the selected option.
Import
Included in @import 'tw-jib-css-experimental'. To take it on its own, with no other experimental module, and none of the @function overrides:
@import 'tw-jib-css-experimental/picker';This entry reads nothing from tw-jib-css, so it costs you no color machinery you aren't using.
Baseline status
What these utilities are built on, live from the Web Platform Dashboard.