Customizable `<select>`

Style native <select> dropdowns with CSS via appearance: base-select. Custom option styling, icons, colors — no JS dropdown reconstruction.

How it works: Setting appearance: base-select on a <select> opts into the new customizable select mode. You can then style the dropdown picker with ::picker(select), individual <option> elements directly, and customize the checkmark with ::checkmark and the arrow with ::picker-icon. This is a native HTML <select> — full keyboard navigation, form submission, and accessibility built in.

Browser not supported. Customizable <select> requires a browser that supports appearance: base-select. Check caniuse for current support. The demos below may not render correctly.

caniuse: Customizable Select ← Back to index

1. Basic Styled Select

A <select> with custom border, padding, border-radius, focus ring, and styled dropdown picker. All CSS.

2. Color-coded Options

Options with colored left borders to indicate categories. Uses border-left on <option> elements.

3. Select with Icons

Options containing emoji icons alongside text. Native <option> elements can display any Unicode content.

4. Side-by-side Comparison

Default browser <select> vs customized <select> with appearance: base-select.

Default browser select

Customized select

Implementation: Customizable <select> (zero JS)

@supports (appearance: base-select) {

  /* Opt into customizable select */
  select.styled {
    appearance: base-select;
    padding: 0.5rem 1rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
  }

  /* Style the dropdown picker */
  select.styled::picker(select) {
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  }

  /* Style individual options */
  select.styled option {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
  }
  select.styled option:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
  }
  select.styled option:checked {
    background: var(--bs-primary);
    color: white;
  }

  /* Color-coded options */
  option[data-color="red"] {
    border-left: 4px solid var(--bs-danger);
  }
  option[data-color="green"] {
    border-left: 4px solid var(--bs-success);
  }

}

<!-- HTML: just a normal <select> -->
<select class="styled">
  <option>🟨 JavaScript</option>
  <option>🔵 TypeScript</option>
  <option data-color="red">Critical</option>
</select>