demo · v142

Breakpoint Preview

Resize the simulated viewport to any common breakpoint, then switch CSS appearance modes to see how the new base-select value keeps rendering consistent across phone, tablet, and desktop — something the old OS-native widget never could.

viewport:
appearance:
current width:768px breakpoint:tablet rendering mode: browser default
preview · 768px

pre-142 vs post-142 comparison

Both selects below are interactive. The left uses legacy styling; the right uses appearance: base-select introduced in Chrome 142 for consistent cross-platform rendering.

before v142 — no reliable custom styling

appearance: auto (OS native)

after v142 — appearance: base-select

appearance: base-select (Chrome 142+)

relevant CSS

/* Chrome 142+: opt in to the new cross-platform rendering mode */
select {
  appearance: base-select;
}

/* Now you can style it reliably at every breakpoint */
@media (max-width: 480px) {
  select { font-size: 1rem; padding: 0.75rem; }
}
@media (min-width: 1024px) {
  select { font-size: 0.9rem; padding: 0.4rem 0.6rem; }
}

see also