配了八年下拉框，每次样式都要靠 div 模拟——今天浏览器自己会了，appearance: base-select 把这件事彻底原生化了

select 是浏览器最丑的表单控件，没有之一。设计稿给的是一个带图标、有圆角、跟整套设计语言融为一体的下拉菜单，前端工程师一看——行吧，开始套 div。

这套方案做了多少年了？八年。每一套背后都是一个完整的可访问性债务：键盘导航要自己写，屏幕阅读器要自己接，表单提交要自己管。代码量从一行变成了一百行。

Safari 27（2026 年 6 月）做了一件所有前端工程师等了十年的事：把 select 的样式控制权还给你，同时把可访问性也一起还给你。

只需要两个 CSS 声明：

select {
  appearance: base-select;  /* 启用自定义样式模型 */
}

select::picker(select) {
  appearance: base-select;  /* 继续继承这套样式 */
}

然后你就可以用普通 CSS 控制字体、背景、边框、内边距——跟你自定义一个 div 按钮完全一样。::picker-icon 是新的伪元素，专门控制下拉箭头，换成 SVG 图片只要三行：

select::picker-icon {
  content: url(arrow.svg);  /* 三行换一个箭头 */
}

菜单打开状态下，用 :open 伪类改颜色：

select:open {
  border-color: #3b82f6;
  background: #eff6ff;
}

选项里可以塞图片和子文本了——直接写在 <option> 里，不需要任何 JS：

<option>
  <img src="buildings.svg" alt="">
  Buildings
</option>

选中态用 :checked 控制，对勾用 ::checkmark 替换：

option:checked::checkmark {
  background: #3b82f6;
  border-radius: 50%;
}

Safari 27 允许用 grid-template 和 gap 在选项菜单里跑 Grid 布局，不再是千篇一律的垂直列表：

select::picker(select) {
  grid-template: auto / 1fr 2fr;
  gap: 0.75rem;
  padding: 1rem;
}

<selectedcontent> 是另一个新元素，放在 <select> 里专门用来在按钮区域渲染选中内容的富文本展示——图标 + 文字的组合可以直接在按钮里呈现，不需要额外写 div 模拟。

为什么这件事真的不一样

过去十年，前端社区的主流思路是「既然原生的丑又不可定制，那就用 JS 写一个新的」。这个思路带来了巨大的可访问性债务：自定义下拉组件的键盘支持残缺、屏幕阅读器语义丢失、聚焦管理一团乱麻。

appearance: base-select 换了一种思路：不是把 select 替换掉，而是把原生的渲染层打开，让你直接在里面改样式。可访问性是「默认保留」的，不需要你做任何额外工作。

键盘导航、屏幕阅读器语义、表单提交、验证、change 事件——全部继承原生 select 的行为，设计完全由你控制。

Chrome 135 也同步支持了这个 API。旧浏览器会回退到平台原生的 select 样式，渐进增强开箱即用。

下一步

如果你现在手头有一个用 JS 封装的 Select 组件，第一步不是重写，是把 appearance: base-select 写进去，看设计稿哪些部分可以直接用 CSS 接住。图标类选项和网格布局菜单是两个收益最明显的场景，可以优先实验。