品牌精选样式

Web 功能： 可自定义的 <select>

可自定义的 select API 提供了一种声明式、CSS 驱动的方式来设置 <select> 元素的样式，使其与您品牌的 设计体系 完美契合。选择启用 appearance: base-select 后，您便可以访问 select 元素的内部 shadow DOM，从而使用标准 CSS 属性为按钮、选项选择器列表、箭头图标和对勾标记指示器设置样式。

以前，若要实现完全品牌化的选择菜单，需要使用 JavaScript 从头开始重新构建控件，这通常会破坏无障碍功能、键盘导航和原生表单集成。借助 appearance: base-select，您可以获得自定义外观，而浏览器则负责处理焦点管理、顶层渲染和无障碍绑定。

如何实现

如需实现品牌化选择样式，请执行以下操作：

  1. 选择启用自定义：将 appearance: base-select 同时应用于 <select> 元素和 ::picker(select) 伪元素（用于定位选项下拉列表）。
  2. 构建自定义按钮（可选）：直接在 <select> 内定义 <button> 元素，以替换默认触发器。使用此按钮内的 <selectedcontent> 元素来表示当前所选选项的文本或内容。
  3. 设置选择器列表的样式：使用 ::picker(select) 伪元素为下拉列表应用排版、背景颜色、边框和阴影。浏览器会在顶层渲染此元素，从而避免 z-index 冲突。
  4. 设置内部图标的样式：
    • 使用 select::picker-icon 可设置箭头图标的样式或替换箭头图标。
    • 使用 option::checkmark 为所选选项旁边的对勾标记指示器设置样式。
  5. 样式选项：为 <option> 元素应用样式，以设置悬停状态、内边距和布局。

示例代码：Branded Courier Select

以下示例展示了一个自定义选择框，其样式采用等宽字体和虚线边框，以契合特定的“包裹”品牌美学。

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

策略性实施和最佳实践

  • 如果您的设计系统要求所有表单控件具有高保真、视觉一致性，而标准跨浏览器选择替换无法实现这一点，请使用 appearance: base-select。
  • 如果您依赖于操作系统的原生选择器体验（例如 iOS 设备上的标准滚轮选择器），请不要使用此属性。选择启用 base-select 会停用原生移动界面控件，改为使用网页呈现的顶层菜单。
  • 务必验证色彩对比度是否符合 WCAG 标准。您可以使用可自定义的颜色选择器设置临时颜色，但您需要自行确保文本在自定义背景下仍清晰可辨。
  • 测试布局行为。设置 appearance: base-select 会移除默认浏览器行为，即根据最长选项宽度调整选择框大小。您可能需要设置固定宽度或使用 flex/grid 限制来防止布局偏移。
  • 确保您的 <select> 具有 name 属性和关联的 <label>。这样可以确保即使采用自定义界面，屏幕阅读器也能访问该组件，并且该组件能与标准表单提交功能正常配合使用。
  • 在选项中使用标准 value 属性，以确保表单提交功能与之前完全相同。

后备策略

可自定义 <select> 的回退和浏览器支持

对于尚不支持 appearance: base-select 的浏览器，<select> 元素会优雅降级为标准操作系统下拉菜单。

  • 忽略非文本内容：旧版浏览器会剥离 <option> 标记内的 HTML 标记（例如 <svg> 或 <div>），仅呈现文本节点。确保 <option> 的文本内容本身清晰易读且有意义。
  • HTML 结构处理：标准解析器可能会忽略 <select> 内的 <button> 和 <selectedcontent> 标记，或将其视为无效。如果您将标准文本视为可读的后备内容，则渐进增强功能不需要任何繁重的 JavaScript polyfill。
document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});