HTML Selects Are Actually Styleable Now

Avatar photoByAdil

The <select> element has historically been one of the most difficult HTML elements to style. For the longest time, OS defaults made elements nearly impossible to style, forcing developers to build custom dropdowns or rely on libraries. I’m sure most of you have tried appearance: none and the usual hacks to make it look right.

Chrome 135 changes this with new web-native styling that gives you complete control over <select> elements using just HTML and CSS.

Check out the full article here!

appearance: base-select

appearance: base-select is a new CSS property that converts the element to a customizable state and removes the OS styling. This can be applied to the select itself and the dropdown picker as well. However, you can’t style the picker without also applying it to the parent <select>: 

select,
::picker(select) {
  appearance: base-select;
}

This property allows you to do a bunch of cool stuff:

  1. Complete styling control over the select and picker. This includes the <selectedcontent> as well (the content of the selected option shown in the button).
  2. Include rich content like an image or SVG in the <option> element. Previously, the browser would ignore these.
  3. Style the drop-down arrow icon using ::picker-icon.
  4. Conditionally style selected (checked) options and their respective checkmarks.

Let’s discuss each of the above in more detail.

Styling the Components

The Select Button

Since the selection button is the main visible part, it is often the most styled. Once you apply appearance: base-select, it behaves like any other stylable element. You can add padding, borders, shadows, background colors, etc. 

select {
  appearance: base-select;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 0.5em 1em;
}

select:hover{
  background-color: #0078d7;
}

You can also style the content shown inside the button using the new <selectedcontent> element. This represents whatever’s currently selected (i.e. the content inside the select button). 

selectedcontent {
  /* some styling */
}

The dropdown picker

The dropdown (or the picker) as a whole can be targeted by the ::picker(<element>) pseudo-elemenent. 

::picker(select) {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

The picker behaves like a popover and is layered above all other content.

Note: This will only work if the has appearance: base-select;.

The picker icons

Using the ::picker-icon pseudo-element, you can style or completely replace the dropdown picker icon. You can combine this with the :open pseudo-class to only style the icon when the picker is open. 

select::picker-icon {
  content: "▼";
  color: #666;
  margin-left: 0.5em;
}

select:open::picker-icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

Conditional styling

The selected or “checked” state can now be targeted directly using option:checked. 

option:checked {
  background: #0078d7;
  color: white;
}

The ::checkmark pseudo-element targets the checkmark icon inside the currently selected option. 

option::checkmark {
  content: "✔";
  color: white;
  font-size: 0.9em;
  margin-right: 0.5em;
}

Browser Compatibility

As of writing this, only Chromium-based browsers (starting with Google Chrome 135+ and similar versions of Microsoft Edge) fully support the new appearance: base-select workflow along with pseudo-elements like ::picker(select), ::picker-icon, and ::checkmark.

Thanks for reading!

Want to explore more modern CSS tricks? Check out @starting-style for easy entry transitions.

Similar Posts