在本机和自定义选择元素之间达到平衡-css教程-PHP中文网

首页

web前端

css教程

在本机和自定义选择元素之间达到平衡

Lisa Kudrow

Apr 05, 2025 am 09:32 AM

Striking a Balance Between Native and Custom Select Elements

本文探讨如何构建既美观又易访问的样式化下拉选择元素。我们将巧妙地结合原生 <select></select> 元素和自定义样式，实现最佳用户体验。

名称的重要性：下拉列表、菜单、导航

在研究过程中，我们发现“下拉列表”、“菜单”、“导航”等术语经常混用，导致歧义。本文将明确定义“下拉列表”：

下拉列表: 一种交互式组件，包含一个按钮，用于显示和隐藏项目列表，通常通过鼠标悬停、点击或轻触触发。列表默认隐藏，交互后显示。列表通常以块状内容（即选项）的形式覆盖其他内容。

许多界面元素看起来像下拉列表，但简单地将其称为“下拉列表”如同用“鱼”来描述动物一样笼统。我们需要区分菜单、导航和选择元素这三种不同类型的下拉列表：

菜单: 页面内容中用户可执行的命令或操作列表。
导航: 用于网站导航的链接列表。
选择: 表单控件（<select></select>），用于在表单中显示供用户选择的选项列表。

不同用户对界面的感知和交互方式不同，因此对UI元素的命名和设计模式的定义存在主观性。

<menu></menu> 元素已弃用，不推荐使用。关于包含式菜单和菜单按钮的详细说明，以及为什么不应将 ARIA 菜单角色用于站点导航，请参考相关资源。

我们将专注于作为 <select></select> 元素的下拉列表类型。

`<select></select>` 元素的样式化挑战

根据 MDN 的说法，样式化表单控件存在“好、坏、丑”三种情况。<select></select> 元素无疑属于“丑”的范畴，其样式化支持不足，导致开发者常常寻求替代方案。

理想情况下，如果可以避免使用 <select></select>，就应该避免。然而，在某些情况下，<select></select> 仍然是最佳选择，例如选项数量众多、布局空间有限或时间/预算不足等。

自定义 `<select></select>` 的需求

创建自定义 <select></select> 时，通常需要满足以下需求：

按钮显示当前选定的选项。
点击按钮切换选项列表的可见性。
点击选项列表中的选项会更新所选值，按钮文本随之更改，选项列表关闭。
点击组件外部会关闭选项列表。
触发器包含一个指向下方的三角形图标，指示存在选项。

然而，这仅仅满足了部分需求。原生 <select></select> 元素还提供以下功能：

无论用户的视觉能力如何，选定的选项都清晰可见。
组件能够以可预测的方式与键盘交互（例如，使用箭头键导航，Enter 键选择，Esc 键取消等）。
辅助技术（例如屏幕阅读器）能够清晰地向用户宣布元素，包括其角色、名称和状态。
选项列表位置调整（即不会被屏幕裁剪）。
元素遵守用户的操作系统偏好设置（例如高对比度、配色方案、动画等）。

许多自定义 <select></select> 组件都无法完全满足这些需求。

构建“混合”选择器

构建简单的自定义 <select></select> 会牺牲功能性以换取美观性。更好的方法是默认提供原生 <select></select>，并在可能的情况下将其替换为更美观的自定义版本。这就是“混合”选择器的理念。它包含两个选择器：

原生 <select></select>，默认可见且可访问。
自定义 <select></select>，默认隐藏，仅在使用鼠标时显示。

以下是 HTML 结构示例：

<label for="selectNative">Main job role</label>
<div>
  <select id="selectNative" class="selectNative">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <div class="selectCustom">
    <!-- Custom select content -->
  </div>
</div>

CSS 代码用于控制两个选择器的显示和位置：

.selectNative,
.selectCustom {
  position: relative;
  width: 22rem;
  height: 4rem;
}

.selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

@media (hover: hover) {
  .selectCustom {
    display: block;
  }
  .selectNative:focus   .selectCustom {
    display: none;
  }
}

JavaScript 代码用于处理点击事件、同步两个选择器的值以及键盘导航。