Customizable Select：终于能为真正的 <select> 设计样式

要超越默认的 select 元素，过去只有两种糟糕的取舍：沉重的 JavaScript 库，或大量的 div 元素，而无论哪一种，无障碍都会变得棘手。¹在 WWDC 2026 上，Safari 团队指出了一条出路：customizable select，这是一组 HTML 与 CSS 的新增功能，让既有的 <select> 元素变得完全可设计样式，同时保留它原本就具备的语义、键盘导航与屏幕阅读器支持。从 Safari 27 与 Chrome 135 开始，您可以重新设计按钮、下拉菜单、勾选标记，甚至箭头，然后在选项中放入图片、视频或表情符号。¹

TL;DR

• Customizable select 仅靠 HTML 与 CSS 就能为真正的 <select> 元素设计样式，取代开发者过去依赖的 JavaScript 库与 div 堆叠。此功能自 Safari 27 与 Chrome 135 起提供。¹
• 启用方式是 appearance: base-select，需应用两次：一次用在 select 本身以开放按钮样式，一次用在 ::picker(select) 上以退出原生下拉菜单。¹
• 随之而来的还有新的可设计样式部件：::picker-icon 通过 content 属性与 width 重新设计箭头，option 元素上的 ::checkmark 以相同方式替换勾选标记，而 :open 伪类则在菜单打开时为按钮设计样式。¹
• 选项可接受任何形式的内容：图片、视频、表情符号。本场演讲的演示在每个选项中放入一个 SVG 与一个标签，再以 grid-template 与 gap 将整个下拉菜单排成 CSS grid。¹
• 将 <button> 放在 <select> 的第一个子元素位置（这在 HTML 中过去并不允许）可取代内置按钮；其中的 <selectedcontent> 元素会显示所选选项的丰富内容。²
• 渐进增强是免费附带的：不支持的浏览器会回退到原生弹出菜单，而语义化的 select 元素在任何地方都保有其内置的无障碍能力。¹

从 div 杂烩回到语义化 HTML

Safari 工程师 Tim 从 2:48 起，将 appearance: base-select 应用到一个摄影师作品集的演示上。

这场演讲的切入点，是 <select> 原本就做得很好的部分。此元素开箱即提供基本无障碍：跨 option 元素的键盘导航，以及稳健的屏幕阅读器行为，全都不需外部库。¹在 Apple 平台上，原生呈现是大家熟悉的下拉按钮，并与平台上其他所有控件一致，这让用户拥有一套已知的导航方式。¹

问题一直出在设计。把原生控件放到一个精心设计的网站上，它会显得格格不入，怎么也融不进去。在此之前，解法意味着完全舍弃此元素，改用 JavaScript 小部件或一堆 div，再亲手重建无障碍。Customizable 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);
}

有了干净的起点，演示以 padding 与 margin 安排间距，再为下拉菜单处理边框与 box-shadow。¹要强调当前的选择，用的是既有的 :checked 选择器，而非任何新东西：把勾选的选项加粗，其余的变灰。¹

option:checked {
  font-weight: bold;
}

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

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

::checkmark 的运作方式与 ::picker-icon 完全相同：设置 content 与一个 width，默认的勾选标记就会变成任何符合您设计的字符。¹

选项中的丰富内容，以 grid 排版

更大的转变在于 <option> 里头能放什么。演讲说得很明确：任何形式的内容都行，图片、视频、表情符号，随您喜欢。¹演示为摄影师最热门的主题打造了一个分类浏览器，每个选项中都有一个 SVG 符号与一个标签：

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

请留意空白的 alt。Tim 刻意把图片的替代文本留空，否则“Flowers”这个标签会被屏幕阅读器念出两次。¹细节虽小，后果却实在：丰富的选项在辅助技术下，能与纯文本选项一样好用。

移除默认勾选标记后，演示改以 checked 选择器与颜色变化来突显所选的选项。¹还剩一个问题：符号加标签的选项会让下拉菜单变得很长。解法重用了既有的 CSS，因为 picker 如今是一个普通的样式目标。一个 grid 布局重塑了整个菜单：

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

grid-template 定义行数与列数，而 gap 定义 grid 单元格之间的间距，于是下拉菜单便对齐成一个井然有序的分类网格。¹演讲以同一主题的精彩之作收尾：一个完全用 customizable select 打造的放射状颜色选择器。¹

可替换的按钮与 selectedcontent

分类浏览器还留有一处缺口：SVG 符号活在选项里，但显示当前选择的那个按钮，却只呈现文本。¹Customizable select 通过让您替换内置按钮来补上这个缺口，方法是把一个 <button> 元素放在 <select> 的第一个子元素位置。在 select 里放一个按钮，在 HTML 中过去并不允许；如今它接受自定义内容，例如标签，或是专为此用途打造的那个元素。¹

WebKit 的 Safari 27 beta 公告为那个元素命了名：<selectedcontent>。把它放进 select 的第一个子按钮中，它就会显示当前所选选项的内容，并可直接设计样式。²

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

该元素会映现所选选项所属的任何丰富内容，例如演示中“Everything”标签旁的那个 SVG，于是按钮终于展现出与它所打开的菜单相同的视觉语汇。¹²

渐进增强内置其中

演讲的最后一步，正是各团队一旦略过便会自食其果的那一步：在不支持 customizable select 的浏览器中检查设计。答案以最好的方式平淡无奇。渐进增强随即生效，控件依然可用，而客户会拿到原生弹出菜单。¹重用 select 元素意味着回退方案早已存在，而且由于 <select> 是语义化元素，内置的无障碍功能能在每一个浏览器中留存。¹

可用性十分具体：Safari 27 与 Chrome 135。要立即试用这些功能，请下载 Safari Technology Preview 或 Safari Beta。¹演讲的结尾指引很实际：到 webkit.org 上看看演示，在自己的网站上设计一些简单的东西，在不支持的浏览器中、以及配合辅助工具进行测试，并阅读 WebKit 的最佳实践资料，让界面对每个人都行得通。¹

要点总结

给前端开发者： - 在 select 元素上用 appearance: base-select 启用按钮的设计，并在 ::picker(select) 上再次启用下拉菜单；接着像对待任何其他元素一样设计背景、边框、内边距、间距与 box-shadow。¹ - 用 ::picker-icon 替换箭头、用 ::checkmark 替换勾选标记，两者皆通过 content 加 width；用 :open 设计打开状态；用既有的 :checked 选择器强调所选项目。¹ - 在 <option> 中放入真正的 HTML（图片、视频、表情符号），并用既有的 CSS 重塑菜单，例如一个 grid-template 加 gap 的 grid；用一个内含 <selectedcontent> 的第一子 <button> 取代内置按钮。¹²

给重视无障碍的团队： - 语义化的 select 在支持与不支持的浏览器中一律保有键盘导航与屏幕阅读器支持，且无需外部库。¹ - 当选项同时带有图片与文本标签时，请把图片的替代文本留空，以免屏幕阅读器把标签念两次。¹ - 依照演讲本身的检查清单，在发布前以不支持的浏览器、并配合辅助工具进行测试。¹

给规划落地的技术负责人： - 把 customizable select 当作渐进增强来看待：Safari 27 与 Chrome 135 获得自定义设计，其余所有人获得原生弹出菜单，且无需 JavaScript 回退方案。¹ - 现在就在 Safari Technology Preview 或 Safari Beta 中评估它，并权衡它与当前躺在您 bundle 中的那个下拉菜单库。¹

FAQ

什么是 customizable select？

Customizable select 是一组 HTML 与 CSS 的能力，由 Safari 团队在 WWDC 2026 上推出，自 Safari 27 与 Chrome 135 起提供，让既有的 <select> 元素变得完全可自定义。您用 CSS 设计按钮、下拉菜单、箭头与勾选标记，并在选项中放入丰富内容，同时保留元素内置的无障碍能力。¹

我该如何启用 customizable select？

在两个地方应用 appearance: base-select：一是 select 元素本身，这会把原生按钮呈现换成一组较小的基础样式；二是 ::picker(select)，这会让下拉菜单退出其原生呈现，使您能自由设计样式。¹

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

可以。演讲指出您可以在选项中放入任何形式的内容：图片、视频、表情符号。演示在每个选项中使用一个 SVG 与一个文本标签，并把图片的替代文本留空，使屏幕阅读器只念标签一次，再以 grid-template 与 gap 把菜单排成 CSS grid。¹

selectedcontent 元素是什么？

<selectedcontent> 是在 select 的按钮中显示当前所选选项丰富内容的元素。Customizable select 允许 <button> 作为 <select> 的第一个子元素，这在 HTML 中过去并不允许；把 <selectedcontent> 放进那个按钮中，会映现所选选项的内容，例如标签旁的一个 SVG，而该元素可直接设计样式。¹²

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

控件会优雅降级。渐进增强意味着 select 依然完全可用，客户会拿到原生弹出菜单，而且由于 <select> 是语义化元素，内置的无障碍功能依旧保留。演讲建议在发布前以不支持的浏览器并配合辅助工具进行测试。¹

Customizable select 删去一个依赖，正如 CSS Grid Lanes 之于 masonry 布局，而这样的搭配是刻意安排的：session 315 本身在结尾就把观众引向 Grid Lanes 那场演讲，而演示网站同时用上了这两项功能。¹Apple 持续扩展纯 HTML 元素所能做到的事，这与 Apple 平台上的 HTML model 元素 所谈的是同一条轨迹，而您每少发布一个下拉菜单库，都让 no-build 宣言 的论点更加站得住脚。完整的系列中枢是 Apple Ecosystem Series。

参考资料