现在可以使用 CSS 自定义 <select> 元素

Adam Argyle

发布时间：2025 年 3 月 24 日

从 Chrome 135 开始，Web 开发者和设计师终于可以统一使用可访问、标准化且可使用 CSS 样式的 <select> 元素。这项工作历经多年，需要投入大量时间进行工程和协作规范工作，最终成果是这个功能丰富且强大的组件，不会在旧版浏览器中出现故障。

以下视频展示了如何使用这些新功能自定义精选集：

精选了 Una、Brecht 和 Adam 的演示。

如果您一直在密切关注，就会发现自 Una 请求社区提供反馈以来，一些规范名称和功能已发生变化。幸运的是，如果您曾按照该帖子中的说明操作，并且有兴趣了解具体有哪些变化，Una 也为您准备了相关信息。

我们还推出了全新的 MDN 文档，详细介绍了可自定义的选择器。

认识 appearance: base-select

新的 CSS 属性 appearance: base-select，用于将 <select> 元素置于一个新的可配置且可设置样式的状态，通常称为“基本”样式：

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

使用 base-select 可解锁多项新功能和行为：

使用 base-select 会丢失一些功能和行为：

  • <select> 不会在浏览器窗格之外呈现。
  • 它不会触发内置的移动操作系统组件。
  • <select> 会停止采用最长 <option> 的宽度。

<select> 现在可以包含丰富的 HTML 内容

在您可以自定义 <select> 之前，如果您将图片或 SVG 等内容放入 <option> 元素中，浏览器会忽略它们。

请考虑以下 HTML，浏览器会按您编写的方式读取它：

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

不过，所用 DOM 不包含 <svg>：

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

下面（从左到右）是 Chrome、Safari 和 Firefox 渲染上述 HTML 的效果。如果浏览器支持 appearance: base-select，则 SVG 将显示在该选项中，否则不会显示。

显示 Chrome、Safari 和 Firefox 渲染包含 SVG 的选择器。Chrome 会显示图片，Safari 和 Firefox 则会呈现为没有图片。
在 Codepen 中试用一下。

由于解析器发生了变化，使用可自定义选择的现有网站可能会出现故障。Chrome 提供了 Finch 实验背后的功能，以防需要紧急关闭实验。如果一切顺利，实验将结束，并且代码将永久发布到源代码中。

完全可定制

base-select 的每个部分都可以替换、自定义和添加动画效果。以下演示展示了如何使用所有新功能打造醒目且有意义的选择体验。

显示了选择元素的四种不同呈现方式。第一个图标中有一个绿色的状态指示圆点，标签为“开启”。下图显示了选项旁边的头像。第三种是内置自定义标签的颜色空间选择器。最后一个选项用于选择草稿状态或已发布状态。
在 Codepen 中试用一下。

如需查看更多示例，请参阅本文末尾的“资源”部分。

未更改的 JavaScript 接口

您现有的 JavaScript 与 <select> 元素的互动不会受到任何风险。

不过，如果您确实开始向 <option> 元素添加富媒体 HTML，则应测试所选值，因为浏览器仍会解析并忽略图片和 SVG。不过，用于确定所选内容字符串的逻辑已发生变化，您可能需要根据选项中的内容进行调整。

如果您在 <option> 上使用 value 属性，则无需担心。

资源

Chrome 是第一个实现 base-select 的浏览器，但每款浏览器都参与了规范的制定，并且还有更多“基础”元素尚未完成。这只是一个开始。

敬请关注，我们将继续添加有关自定义特定元素的指南、示例和资源。在此之前，请点击以下链接了解详情。

特别感谢所有参与此项计划的人员！