请求开发者反馈：可自定义选择

Una Kravets

多年来，开发者一直反映，设置 <select> 元素等表单控件的样式是他们最头疼的问题，我们一直在努力寻找解决方案。虽然这项工作很复杂，并且花了很长时间才完成，但我们已经非常接近推出此功能了。自定义版本的 select 元素已正式进入 WHATWG 的第 2 阶段，具有浓厚的跨浏览器兴趣，并且有一个原型可供您在 Chrome Canary 130 中进行测试。

欢迎试用并向我们提供反馈

请检查您安装的 Chrome Canary 是否已更新到版本 130，以及是否启用了实验性网络平台功能标志。您可以通过以下方式启用此标志：在地址栏中输入 chrome://flags，然后启用 #experimental-web-platform-features。然后，您应该就能在这篇博文中看到 Codepen 演示。或者，您也可以查看此 Codepen 集合，在一个地方查看所有这些代码。

您可以使用此表单提供有关该功能的反馈。只需 3 分钟即可完成！

我们来深入了解可自定义的 select API 的功能，该 API 基于现有的 HTML select 标记。

选择启用新版 <select>

如需选择启用新行为，请在页面内选择按钮和选择选择器上使用 CSS appearance 属性。如需选择启用，请在 <select> 元素和 ::picker(select) 上设置 appearance: base-select。

::picker(select) 是用户代理提供的新伪元素，仅适用于已使用 appearance: base-select 选择启用新行为的 <select> 元素。此选择器伪元素是由基本选择按钮触发的弹出式窗口。您可以同时选择启用这两项功能，如以下代码所示：

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

您可以选择仅启用页内按钮，但不能仅启用选择器弹出式窗口，而不启用页内按钮。只有在将 appearance: base-select 应用于 <select> 后，系统才会创建 ::picker(select)。

现在，您可以自定义您的 select 元素了。新的可自定义选择器附带一些默认样式，这些样式在不同浏览器和操作系统中看起来都一样。在 macOS 上，与 Chrome 中的现有选择相比，默认的自定义选择如下所示：

<ph type="x-smartling-placeholder">
</ph>
默认用户代理样式，可在右侧自定义选择。此时间表可能会发生变化，欢迎您就此提供反馈。
基本选择与可自定义选择的演示。

分解各部分

<ph type="x-smartling-placeholder">
</ph>
显示部分选择内容的示意图。

进入新的可自定义的选择模式后，您现在可以使用的新元素包括： - selectedoption：反映当前所选选项的内部 HTML。 - option::before：包含一个对勾标记，用于指示当前选定的选项是默认无障碍功能（可能会发生更改）。 - ::picker(select)：包含可自定义选择器内 button 以外的所有内容的弹出式菜单。

您可以为选定内容的任何部分设置样式。例如，您可以在 <option> 元素中添加任意非交互式内容，为用于打开选择下拉菜单的页面内按钮设置样式，并为选项下拉菜单（::picker(select)）设置样式。

您还可以设置 button 的样式、自带箭头指示符，以及在任何元素内部和周围添加任意内容。除了添加内容之外，您还可以隐藏任何这些新元素和默认样式。例如，如果您不希望在选项的 ::before 伪元素中显示指示器对勾标记，请使用以下 CSS。

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

虽然选定内容中的元素数量不受限制，但浏览器会将 <button> 元素之外的任何内容分桶到 ::picker(select) 伪元素中，后者的行为类似于锚定到按钮上的弹出式窗口。此 <button> 可切换 ::picker(select)。直接位于选择器内的选项和其他元素将提升到 ::picker(select)，或者您也可以提供自己的封装容器以进行样式设置。此封装容器也将放置在 ::picker(select) 伪元素内。

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

新的可自定义 <select> 使用了弹出窗口和锚点定位中的功能。它是基于这两项底层技术构建的。这意味着，选择器中的下拉选项列表会充当一个悬停窗口，该悬停窗口锚定到用于打开选择器的触发器按钮。

您可以使用锚点定位来设置此 ::picker(select) 弹出式窗口的样式（包括将其锚定到其他元素）。这种内容模型还意味着，顶层动画样式可与选项列表搭配使用，以对进入和退出效果进行动画处理。

美化现有的 <select> 元素

之前，Chrome 团队一直在研究 <selectlist> 元素的概念。本文介绍的是该功能经过重新设计，以便重复使用现有的 <select> 元素。

重复使用现有 <select> 元素的主要优势之一是能够逐步增强基本 HTML 元素。与全新元素相比，重复使用 <select> 仍会在您的页面上呈现有意义的内容。以下示例展示了自定义选择与使用不受支持的浏览器的用户会看到的内容：

<ph type="x-smartling-placeholder">
</ph>
option 中的所有文本内容都会在 select 元素的回退版本中呈现。

基本样式

更改可能非常简单，例如更改选择元素的视觉样式。例如，更新按钮样式、悬停和聚焦样式，或选择选项的背景。在使用appearance: base-select启用这项功能后，您可以将所需的任何 CSS 应用于所选部分。

使用默认按钮更改选择器的各个部分的样式。

如需自定义箭头指示器，请在选择器中添加您自己的按钮和箭头。

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

然后，设置箭头样式：

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

选项中的复杂内容

您还可以进一步扩展，在 <select> 内的 <option> 元素中添加字符串以外的内容并为其设置样式。一个基本示例是在下拉菜单中在国家/地区名称旁边添加国旗图片。为此，请在选项文本旁边添加一个图片元素。

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>
带有国旗的国家/地区选择器。

更复杂的示例可能包括个人资料照片、姓名和其他信息，以帮助您决定在下拉菜单中选择哪个项目。

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>
货币选择器的屏幕截图。

为所选选项设置样式

您可能希望所选选项在所选状态下的显示方式与在下拉菜单中的显示方式不同。以 Gmail 界面为例，为了节省空间，系统会在用户选择相应选项后移除标签。为此，只需接入 <selectedoption> 元素来设置样式。<option> 包含以下所有标记：

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

现在，对 <selectedoption> 内的 .text 应用 display: none，以隐藏文本内容并仅显示图标：

selectedoption .text {
  display: none;
}
Gmail 样式的选择，带有表示选定选项的图标。

互动选项

您可以完全控制 ::picker(select) 的样式，在前面的演示的基础上，使其在悬停和聚焦时具有交互性。在本演示中，新的 calc-size() 函数用于为选择器的宽度添加动画效果，使其从显示图标变为当鼠标指针悬停时或所选选项具有焦点可见的选项时，显示相应选项的全宽。

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}
交互式 Gmail 风格选择，在悬停或聚焦时逐步显示内容。

限制和无障碍功能说明

能力越大，责任也就越大。为了确保内容可访问，此功能有一些限制。

  • 除了 <option> 元素之外，<select> 内部还不允许使用互动（可聚焦）元素，例如按钮或其他元素。目前，建议的内容模型仅允许使用 <div>、<span>、<option>、<optgroup>、<img>、<svg> 和 <hr> 元素。
  • 分屏按钮目前处于实验阶段，我们正在努力制定一项无障碍解决方案。

随着这些体验的无障碍功能逐渐完善，内容模型预计会扩展为更加灵活。

总结

我们很高兴看到此功能在工作组和标准机构的推动下不断发展，并在积极构建原型并评估此功能的形态时分享我们的进展。如果您遇到了某些功能无法正常运行的情况，请告诉我们！

虽然此功能仍处于开发阶段，但我们非常希望通过这个简短的反馈表单与我们分享您的反馈意见。

感谢您为我们所做的一切努力，确保我们能正确处理这一问题，并让您能够更轻松地在网络上构建无障碍、可自定义的表单控件！