可定制的 Select：终于能为真正的 <select> 设置样式了

要突破默认 select 元素的局限，过去意味着两种糟糕的取舍：要么用笨重的 JavaScript 库，要么堆砌大量 div 元素，而无论哪种方式，无障碍支持都变得棘手。¹ 在 WWDC 2026 上，Safari 团队指明了出路：可定制的 select——一组 HTML 和 CSS 新增能力，让既有的 <select> 元素可以完全设置样式，同时保留它原本就具备的语义、键盘导航和屏幕阅读器支持。从 Safari 27 和 Chrome 135 开始，您可以重新设置按钮、下拉菜单、勾选标记乃至箭头的样式，然后在 option 中放入图片、视频或表情符号。¹

太长不看

• 可定制的 select 仅用 HTML 和 CSS 就能为真正的 <select> 元素设置样式，取代了开发者过去依赖的 JavaScript 库和 div 堆叠。该能力从 Safari 27 和 Chrome 135 开始提供。¹
• 启用方式是 appearance: base-select，需应用两次：一次在 select 自身上，以开放按钮样式；另一次在 ::picker(select) 上，以退出原生下拉菜单。¹
• 随之而来的还有新的可设样式部件：::picker-icon 通过 content 属性和 width 重设箭头样式，option 元素上的 ::checkmark 以同样方式替换勾选标记，:open 伪类则在菜单打开时为按钮设置样式。¹
• option 可接受任意类型的内容：图片、视频、表情符号。会议演示在每个 option 中放入一个 SVG 和一个标签，然后用 grid-template 和 gap 将整个下拉菜单布局为一个 CSS 网格。¹
• 将 <button> 作为 <select> 的第一个子元素放置——这在 HTML 中过去是不允许的——可替换内置按钮；其内部的 <selectedcontent> 元素则显示所选 option 的富内容。²
• 渐进增强自然而然地实现：不支持的浏览器会回退到原生弹出框，而语义化的 select 元素在任何环境下都保留其内置的无障碍能力。¹

从 div 一锅粥回到语义化 HTML

Safari 工程师 Tim 从 2:48 开始，将 appearance: base-select 应用于一个摄影师作品集演示。

这场会议的切入点，是 <select> 本就擅长之处。该元素开箱即提供基本的无障碍能力：跨 option 元素的键盘导航和可靠的屏幕阅读器表现，全都无需外部库。¹ 在 Apple 平台上，原生渲染是大家熟悉的下拉按钮，它与平台上其他每个控件保持一致，为用户提供了一种已知的导航方式。¹

一直以来的症结在于设计。把原生控件放到一个精心设计样式的网站上，它会显得格格不入；它拒绝融入其中。直到现在，解决办法都意味着彻底放弃该元素，转而使用 JavaScript 小组件或一堆 div，并手动重建无障碍能力。可定制的 select 保留了该元素，同时把样式控制权交给您，会议在一个真实的摄影师作品集项目上分三步演示了这一点：按钮、下拉菜单，最后是超越纯文本的内容。¹

为按钮设置样式：base-select、::picker-icon 与 :open

按钮是您点击以显示菜单的那部分 select，第一步是单条声明：

select {
  appearance: base-select;
}

appearance: base-select 将原生渲染替换为一组更精简、可供您修改的基础样式。¹ 效果会通过继承立即显现：演示站点在 body 上设置了 font-family: Gill Sans，现在 select 按钮便继承了 body 的字体，与旁边的标签相匹配。¹ 从这里开始，背景、边框和内边距都能像任何其他元素一样进行调整。

两个新的钩子让按钮收尾。箭头有了自己的选择器 ::picker-icon，它接受一个 content 属性来设置替换字形，以及一个 width 来设定其尺寸。:open 伪类则在下拉菜单打开时为按钮设置不同的样式：

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

会议对结果的评价是：仅用寥寥几行 CSS，就得到了一个与网站其余部分相匹配的 select。¹

为下拉菜单设置样式：::picker(select) 与 ::checkmark

菜单本身也带有可设样式的部件。您用 select 元素上的 ::picker(select) 来定位下拉菜单本身，用 option 元素上的 ::checkmark 来定位勾选标记。¹ 退出原生菜单需要再次使用 appearance: base-select，这次用在 picker 上：

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

有了这块干净的画布，演示用内边距和外边距来安排间距，然后处理下拉菜单的边框和 box-shadow。¹ 要突出当前的选择，用的是既有的 :checked 选择器，而非任何新东西：将选中的 option 加粗，把其余的置灰。¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark 的用法与 ::picker-icon 完全一致：设置 content 和 width，默认的勾选标记便会变成任何契合您设计的字形。¹

option 中的富内容，布局为网格

更大的转变在于 <option> 内部能放什么。会议说得很明确：任何类型的内容都行——图片、视频、表情符号，随您所好。¹ 演示为这位摄影师最受欢迎的主题构建了一个分类浏览器，每个 option 中都有一个 SVG 符号和一个标签：

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

请注意那个空的 alt。Tim 有意将图片的 alt 文本留空，因为否则屏幕阅读器会把“Flowers”标签念两遍。¹ 细节虽小，影响却真切：富 option 在辅助技术下仍能像纯文本 option 一样好用。

去掉默认的勾选标记后，演示改为通过 checked 选择器和颜色变化来高亮所选 option。¹ 还剩一个问题：符号加标签的 option 让下拉菜单变得很长。修复办法复用了既有的 CSS，因为 picker 如今已是一个普通的样式目标。一个网格布局重塑了整个菜单：

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template 定义行数和列数，而 gap 定义网格单元之间的间距，下拉菜单便整齐地排成一个井井有条的分类网格。¹ 会议以同一主题的精彩收尾结束：一个完全用可定制的 select 构建的放射状颜色选择器。¹

可替换的按钮与 selectedcontent

分类浏览器还留有一处缺口：SVG 符号存在于 option 中，但显示当前选择的按钮却只显示文本。¹ 可定制的 select 通过让您替换内置按钮来弥补这一缺口——将一个 <button> 元素作为 <select> 的第一个子元素放置。把 button 放进 select 里在 HTML 中过去是不允许的；如今它可接受自定义内容，比如标签，或是专为此用途而设的那个元素。¹

WebKit 的 Safari 27 beta 公告点出了那个元素：<selectedcontent>。将它放置在 select 的第一个子元素 button 内，它便会显示当前所选 option 的内容，并且可以直接设置样式。²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

该元素会镜像所选 option 所附带的任何富内容，比如演示中“Everything”标签旁的那个 SVG，于是按钮终于展现出与它所打开的菜单一致的视觉语言。¹²

渐进增强是内建的

会议的最后一步，正是各团队稍有不慎便会跳过的一步：在不支持可定制 select 的浏览器中检查设计。答案是最美妙的那种“平淡无奇”。渐进增强随之生效，控件依旧可用，客户得到的是原生弹出框。¹ 复用 select 元素意味着回退方案早已存在，而由于 <select> 是一个语义化元素，内置的无障碍特性在每个浏览器中都得以保留。¹

可用范围很具体：Safari 27 和 Chrome 135。要现在就试用这些特性，请下载 Safari Technology Preview 或 Safari Beta。¹ 会议的收尾建议很实用：在 webkit.org 上查看演示，在您自己的网站上为一些简单的东西设置样式，在不支持的浏览器中以及借助辅助工具进行测试，并阅读 WebKit 的最佳实践材料，让界面对每个人都好用。¹

Safari 团队在 labs 中补充的内容

WWDC labs 中的一些信息让全貌更完整，尤其是关于可定制 select 的走向。

值得关注的路线图项目是 appearance: base——同一启用机制被推广到所有表单控件，而不只是 <select>。该值已存在于 CSS 规范中，但尚未在任何地方落地。³ 在 lab 上，专家组表示它“现在不会发布”、稍后才会到来，而且规范讨论仍公开地悬而未决——专家们在现场就未设样式的基础态究竟该是什么样子产生了分歧。⁴ 既定的设计目标足够清晰：最大限度地继承页面样式、没有布局魔法，以及在各引擎间保持完全一致的基础渲染和完全一致的 DOM 结构。⁴

这段历史解释了可定制的 select 为何会复用 <select>。最初的提案是一个全新的 <selectmenu> 元素。一位 WebKit 标准工程师力主改用 <select>，这样不支持的浏览器就能免费保留原生回退——这正是上文所述的渐进增强故事。⁴

专家组得出一条硬性规则：始终在您的 option 中保留文本内容。仅含图标的 option 在不支持的浏览器中会渲染出一个空白的原生弹出框，把用户困在不支持的引擎上。⁴

要点速览

面向前端开发者： - 在 select 元素上用 appearance: base-select 启用按钮样式，再在 ::picker(select) 上用一次以启用下拉菜单；然后像任何其他元素一样设置背景、边框、内边距、间距和 box-shadow。¹ - 用 ::picker-icon 替换箭头，用 ::checkmark 替换勾选标记，二者都通过 content 加 width 实现；用 :open 设置打开态的样式；用既有的 :checked 选择器突出选择。¹ - 在 <option> 中放入真正的 HTML（图片、视频、表情符号），并用既有的 CSS 重塑菜单，比如一个 grid-template 加 gap 的网格；用一个持有 <selectedcontent> 的第一个子元素 <button> 替换内置按钮。¹²

面向重视无障碍的团队： - 语义化的 select 在支持和不支持的浏览器中一样，无需外部库即可保留键盘导航和屏幕阅读器支持。¹ - 当 option 同时承载图片和文本标签时，请将图片的 alt 文本留空，以免屏幕阅读器把标签念两遍。¹ - 按会议自身的清单，在发布前用不支持的浏览器以及辅助工具进行测试。¹

面向规划推广的技术负责人： - 把可定制的 select 当作一种渐进增强：Safari 27 和 Chrome 135 得到自定义设计，其余浏览器得到原生弹出框，且无需任何 JavaScript 回退。¹ - 现在就在 Safari Technology Preview 或 Safari Beta 中评估它，并将它与您打包文件中现有的那个下拉菜单库权衡比较。¹

常见问题

什么是可定制的 select？

可定制的 select 是一组 HTML 和 CSS 能力，由 Safari 团队在 WWDC 2026 上推出，从 Safari 27 和 Chrome 135 开始提供，它让既有的 <select> 元素可以完全定制。您用 CSS 为按钮、下拉菜单、箭头和勾选标记设置样式，并在 option 中放入富内容，同时保留该元素内置的无障碍能力。¹

我该如何启用可定制的 select？

在两个地方应用 appearance: base-select：一是在 select 元素自身上，它会把原生按钮渲染替换为一组更精简的基础样式；二是在 ::picker(select) 上，它让下拉菜单退出其原生渲染，以便您自由地设置样式。¹

我可以在 option 元素中放入图片或其他 HTML 吗？

可以。会议指出，您可以在 option 中放入任意类型的内容：图片、视频、表情符号。演示为每个 option 使用了一个 SVG 和一个文本标签，并将图片的 alt 文本留空，以便屏幕阅读器只念一遍标签，同时用 grid-template 和 gap 把菜单布局为一个 CSS 网格。¹

selectedcontent 元素是什么？

<selectedcontent> 是在 select 按钮内显示当前所选 option 富内容的元素。可定制的 select 允许将 <button> 作为 <select> 的第一个子元素——这在 HTML 中过去是不允许的；把 <selectedcontent> 放进那个 button 内，它便会镜像所选 option 的内容，比如标签旁的一个 SVG，并且该元素可以直接设置样式。¹²

在不支持可定制 select 的浏览器中会发生什么？

控件会优雅降级。渐进增强意味着 select 仍完全可用，客户得到原生弹出框，而由于 <select> 是一个语义化元素，内置的无障碍特性得以保留。会议建议在发布前于不支持的浏览器中以及借助辅助工具进行测试。¹

可定制的 select 删去一个依赖的方式，正如 CSS Grid Lanes 之于瀑布流布局，而这种搭配是有意为之的：session 315 本身在结尾就指引观众去看 Grid Lanes 那场会议，而演示站点也同时使用了这两项特性。¹ Apple 不断拓展朴素 HTML 元素的能力边界，这与 Apple 平台上的 HTML model 元素 所述的轨迹如出一辙，而您每少打包一个下拉菜单库，就为 no-build 宣言 又添一份佐证。完整系列入口是 Apple 生态系统系列。

参考资料