如何创建自定义下拉菜单_SELECT与OPTION标签实现选项交互-html教程-PHP中文网

原生无法满足设计需求，因其在Chrome/Firefox中CSS样式受限，禁止嵌套HTML，无法实现图标、多行文本或自定义颜色等视觉效果。

如何创建自定义下拉菜单_select与option标签实现选项交互

为什么原生无法满足设计需求

原生在 Chrome/Firefox 中样式高度受限，background、padding、border-radius 等 CSS 属性在部分浏览器（尤其是 Windows 下的旧版 IE/Edge）中会被忽略；更关键的是，标签**不允许嵌套 HTML 元素**，无法插入图标、多行文本或自定义颜色。如果你看到下拉项里有 Emoji 或状态徽标，那一定不是靠原生实现的。

用

 +  +  模拟下拉结构核心思路是隐藏原生 ，用语义化但可完全控制的标签组合替代视觉层：


 作为触发器，显示当前选中值（支持任意 HTML 内容）

 作为下拉列表容器，position: absolute 定位，z-index 需高于页面其他元素

 作为每个选项，绑定 click 事件并更新按钮文本和隐藏的  值
必须监听 click 外部区域（document）来关闭菜单，否则点击空白处不收起

示例关键结构：
<div class="custom-select">
  <button aria-haspopup="true" aria-expanded="false">请选择</button>
  <ul role="listbox" aria-hidden="true">
<li role="option" data-value="1">✅ 已验证邮箱</li>
    <li role="option" data-value="2">⚠️ 待审核</li>
  </ul>
<select style="position: absolute; opacity: 0;" name="status"><option value="1">已验证邮箱</option>
<option value="2">待审核</option></select>
</div>

aria-* 属性不是装饰，而是可访问性刚需
去掉 ARIA 属性后，屏幕阅读器会把整个 
 当作普通容器，用户无法感知这是下拉菜单，也无法用键盘导航选项。必须设置：

aria-haspopup="true" 和 aria-expanded 动态切换（true/false），告知展开状态

role="listbox" 绑定在  上，role="option" 绑定在每个 
 上

aria-hidden="true" 初始设为 true，展开时改为 false；同时配合 tabindex="-1" 控制键盘焦点流
按 Enter 或 Space 键应触发展开/收起，ArrowDown/ArrowUp 应在选项间移动焦点

移动端点击穿透与 focus 状态丢失问题
iOS Safari 和部分 Android 浏览器存在“假点击”：点击  后立即展开 
，但紧接着又触发了  的 click，导致刚展开就选中第一项。解决方法：

给  添加 touchstart 事件并 preventDefault()，延迟 100ms 再展开，避开合成点击
不要依赖 :focus 样式做高亮，iOS 上 button:focus 可能不触发；改用 JS 切换 aria-selected 和自定义 class
收起菜单时，确保  重新获得焦点（button.focus()），否则键盘用户无法继续操作

真实项目中，这类交互的边界情况比想象中多：快速连点、从键盘 tab 进入、屏幕阅读器切换模式……别只测鼠标点击。