0Pricing
HTML Academy · 课时

selectlist 元素

使用提议中的 selectlist 元素自定义下拉控件

selectlist 元素 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

长期存在的限制

<select> 元素是少数无法设置外观样式的表单控件之一。应用于它的所有 CSS 规则（自定义边框、字体和选项样式）都会被浏览器忽略，导致数千个“自定义下拉框”库仅仅为了设置选项样式，就重复实现原生行为。

selectlist 是什么

<selectlist>（也称为 <selectmenu>）是一种原生 HTML 元素，旨在作为可设置样式的 <select> 替代方案。它采用相同的概念模型——一个按钮触发器和一个选项列表——但每个部分都开放给 CSS 自定义。

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

可以设置样式的部分

selectlist 会暴露按钮（关闭状态下的触发器）、列表框（打开后的下拉框）和选项。CSS 伪元素（::part(button)、::part(listbox)）让您可以分别设置每个部分的样式，而不会影响原生行为。

自定义选项

selectlist 内部的选项可以包含任意内容——图标、描述和自定义布局，而不仅仅是文本。浏览器仍会处理选择逻辑、键盘导航和焦点管理，同时您可以自由控制外观。

保留内置行为

selectlist 保留了 <select> 擅长的所有功能：键盘导航（方向键、按键搜索）、屏幕阅读器播报、参与表单、焦点管理。您可以继承可访问性行为，并在此基础上设置界面样式。

自定义按钮

为触发器提供一个插槽：<button slot="button">Choose fruit <svg>...</svg></button>。按钮的设计由您决定——可以用自定义图标替换原生三角形、添加标签或更改颜色。浏览器仍会处理打开和关闭。

参与表单

selectlist 与 select 一样参与表单提交：它具有 name 属性和 value，并会随表单一起提交。服务器端处理方式完全相同。对于大多数 select 使用场景，只需在标记层面直接替换即可。

浏览器支持

selectlist 仍处于早期阶段。截至 2026 年，它已在基于 Chromium 的浏览器中通过标志或有限形式发布。Firefox 和 Safari 尚未支持。生产环境使用时，必须为不支持它的浏览器回退到普通的 <select>。

填充难度

要填充一个行为与原生下拉框一致且完全可访问的自定义下拉框非常困难——其中包括焦点陷阱、键盘导航、屏幕阅读器集成和参与表单。Downshift、Combobox、react-aria 等库通过数千行代码完成了这些工作。selectlist 用一个元素取代了这一切。

何时采用

对于内部应用或仅部署在 Chromium 中的场景，选择列表如今能显著减少代码。对于面向广大受众的公共网站，请等待 Firefox 和 Safari 提供支持，或使用包装库：在支持的环境中使用选择列表，在其他环境中回退到自定义下拉菜单。

替换路线图

一旦选择列表在所有浏览器中可用，预计许多自定义下拉菜单库会被弃用，或变成原生元素的薄封装。请关注标准制定过程；该接口已经历多次修订，在最终标准化之前可能还会继续演变。

对设计的影响

设计人员现在可以指定像素级精确的下拉菜单，而不必再附带“设计稿是这样，但下拉菜单在浏览器中会有所不同”的免责声明。选择列表消除了设计稿与最终发布的 HTML 之间长期存在的一种视觉不一致。

知识检查

为什么选择列表元素很重要——它解决了原生