使用现代 CSS 为 Select 元素添加样式

<select> 元素一直是最难以添加样式的表单控件之一。与输入框或按钮不同,它在历史上使用操作系统级别的 UI 组件进行渲染,这意味着 CSS 只能触及表面。这一限制促使开发者采用变通方法,这些方法在今天的生产代码中仍然很常见。

本文涵盖两种方法:使用 appearance: none 的广泛支持的传统技术,以及目前在现代 Chromium 浏览器中出现的新 appearance: base-select 模型。

为什么原生 <select> 元素抵制 CSS 样式

浏览器传统上将 <select> 的渲染交给操作系统。结果是在 Chrome、Firefox、Safari 和 Edge 中出现不一致的盒子尺寸、字体渲染和下拉箭头样式,并且没有可靠的方法仅通过 CSS 来统一它们。

即使在今天,打开的下拉列表(选项面板)在大多数浏览器中仍然基本无法添加样式。在选择方法之前,这是一个值得牢记的硬性约束。

传统方法:appearance: none 配合包装元素

最广泛支持的 select 元素 CSS 样式技术涉及三个步骤:

1. 使用 appearance: none 去除原生外观。
2. 将 <select> 包装在一个可以自由添加样式的容器元素中。
3. 使用 clip-path 或背景 SVG 添加自定义下拉箭头。

:root {
  --select-border: #777;
  --select-arrow: var(--select-border);
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  background-color: #fff;
}

select,
.select::after {
  grid-area: select;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  pointer-events: none;
}

这里的 CSS 网格重叠技巧值得理解:将 <select> 和 ::after 伪元素都分配给同一个命名网格区域会将它们堆叠起来,让自定义箭头在视觉上位于顶部,而不会破坏原生控件的点击行为。

对于焦点状态,由于原生 select 上的 outline 在浏览器之间的行为不可靠,一个常见的解决方法是添加一个 <span class="focus"> 兄弟元素,并使用 select:focus + .focus 配合 position: absolute 来绘制可见的焦点环。

这种方法适用于所有现代浏览器,并保留了原生可访问性——键盘导航、屏幕阅读器播报和表单提交都按预期工作。

现代方法:appearance: base-select

Chrome 135 和 Edge 135 引入了一个新的选择加入模型,该模型公开了 <select> 的内部部分以供直接 CSS 样式设置。您可以这样激活它:

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

这解锁了几个新的样式目标:

• ::picker(select) — 包含选项的下拉面板
• ::picker-icon — 下拉箭头指示器
• option::checkmark — 显示在选中选项旁边的复选标记
• :open — 在选择器打开时激活的伪类
• option:checked — 针对当前选中的选项

使用 base-select,您可以直接为选择器下拉菜单添加样式,为其打开和关闭添加动画,并使用 <selectedcontent> 元素将选中选项的内容镜像到闭合的控件中。支持的浏览器还允许在启用可自定义 select 模型时在选项内使用更丰富的标记。

浏览器支持: 目前主要限于基于 Chromium 的浏览器。在 Can I Use 上查看当前状态。

使用 @supports 将其作为渐进增强应用:

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

您应该使用哪种方法?

使用 appearance: none 包装技术作为基线。它适用于所有地方,保留了可访问性,并为您提供对 select 闭合状态的可靠控制。使用 @supports 在支持它的浏览器中在顶部层叠 appearance: base-select。

结论

使用 CSS 自定义 HTML select 下拉菜单不再是”使用 JavaScript 完全控制”或”接受浏览器默认值”之间的选择。appearance: none 包装模式仍然是可靠的跨浏览器基础,而 appearance: base-select 则为下拉面板添加样式、在选项中嵌入更丰富的内容以及为选择器添加动画打开了大门。这两个极端之间的差距正在缩小,只是在所有浏览器中还不统一。从传统技术开始,逐步层叠现代技术,您将以最少的摩擦覆盖最广泛的用户群。

常见问题

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..