使用 CSS 自定义 `` 元素成为可能

The

element can now be customized with CSS

Source | HN Comments

文章介绍了从 Chrome 135 开始，开发者可以使用 CSS 自定义 `` 元素。核心在于新增了 `appearance: base-select` 属性，它允许对 `` 元素进行样式定制，包括内部结构、部件和状态。这使得 `` 元素可以包含富 HTML 内容，并实现更丰富的视觉效果和交互。文章还提到了使用 `base-select` 带来的改变，以及相关的资源和示例。

The <select> element can now be customized with CSS

通过 Collections 保持井井有条，根据您的偏好保存内容并进行分类。

Adam Argyle X GitHub Glitch Homepage

发布时间：2025 年 3 月 24 日

从 Chrome 135 开始，Web 开发者和设计师终于可以在 Web 上使用可访问、标准化且可使用 CSS 设置样式的 <select> 元素了。 这经过多年的努力、无数小时的工程和协作规范工作，最终带来了一个极其丰富且强大的组件，而且不会在旧版浏览器中崩溃。

这是一个使用这些新功能自定义 Select 的视频：

其中包括 Una、Brecht 和 Adam 的演示。

如果您一直密切关注，您会注意到自 Una 的 社区反馈请求 以来，一些规范名称和功能已发生更改。 幸运的是，如果您根据该帖子进行操作，并且对 更改的内容感兴趣，Una 也可以满足您的需求。

MDN 上还有关于可自定义 Select 的全新 文档，其中包含大量详细信息。

认识 appearance: base-select

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

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

使用 base-select 解锁了许多新特性和行为：

• 更改了浏览器 HTML 解析器，用于 <select> 内部的内容。
• 更改了 <select> 的 呈现内部结构。
• 公开了 <select> 的新内部部件和状态。
• 一种新的最小外观，针对自定义进行了优化。
• 显示的 options 位于顶层，就像一个 popover。
• 显示的 options 使用 anchor() 定位。

使用 base-select 失去了许多特性和行为：

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

预计随着时间的推移，其他元素的更多“base”外观将会开发出来！

<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 将出现在 option 中，否则不会。

在此 Codepen 中尝试。

由于解析器更改，使用可自定义 Select 存在破坏现有网站的风险。 Chrome 在 Finch 实验背后具有这些功能，以防万一需要将其关闭。 如果一切顺利，实验将结束，并且代码将永久运送到源代码中。

完全可定制

base-select 的每个部分 都可以被替换、自定义和动画化。 这是一个演示，它使用每个新功能来创建可识别且有意义的选择体验。

在此 Codepen 中尝试。

在本文末尾的资源部分中查找更多示例。

未更改的 JavaScript 接口

与 <select> 元素的现有 JavaScript 交互没有风险。

但是，如果您确实开始在 <option> 元素中添加富 HTML，则应测试选定的值，因为浏览器仍然会解析并忽略图像和 SVG。 但是，用于确定所选内容字符串的逻辑已更改，并且根据您的选项中的内容，您可能需要进行调整。

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

资源

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

请继续关注，我们将继续添加有关自定义 Select 元素的指南、示例和资源。 在此之前，请查看以下链接以获取更多信息。

• Web 标准
  • Open UI-Select
  • HTML spec pull request
  • Intent to Ship
  • MDN
• Chrome
  • Request for Comments and awesome Una explainer
  • Request for Comments Results
  • Use <hr> in a <select>
  • Una explaining parts and pieces
  • Una Codepen collection
• 社区
  • Brecht De Ruyte Codepen Collection
  • CSS Tricks on native versus custom selects
  • Open Props UI-<select>
  • Custom select with transition animations example

特别感谢所有参与实现这一目标的人！

除非另有说明，否则此页面的内容根据 Creative Commons Attribution 4.0 License 获得许可，并且代码示例根据 Apache 2.0 License 获得许可。 有关详细信息，请参见 Google Developers Site Policies。 Java 是 Oracle 和/或其附属公司的注册商标。

上次更新于 2025-03-24 UTC。

↑