通过隐藏原生select并用div模拟，可实现样式自定义的下拉框。1. 使用position:absolute、opacity:0和pointer-events:none隐藏原生select，保留其语义与功能；2. 用JavaScript同步自定义选项与select的值，支持点击展开、选中更新及外部点击收起；3. 增加键盘导航、焦点管理和ARIA属性以提升可用性与无障碍访问，确保控件既美观又功能完整。
下拉选择框在网页中很常见，但原生的 <select> 样式受限，难以与整体设计风格统一。通过隐藏原生 select 并用 div 模拟，可以实现完全自定义外观的下拉框。
1. 隐藏原生 select 元素
要自定义样式，先保留语义化结构和表单功能，再隐藏默认外观。
说明：使用 <select> 保证可访问性和表单提交正常，通过 CSS 将其视觉上隐藏，但仍保留在 DOM 中供屏幕阅读器和后台处理使用。
-
position: absolute;+opacity: 0;+pointer-events: none; - 这样元素不可见也不响应点击，但仍在文档流中占位
<div class="custom-select">
<select id="mySelect">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<div class="select-trigger">请选择...</div>
<div class="select-options">
<span data-value="1">选项一</span>
<span data-value="2">选项二</span>
<span data-value="3">选项三</span>
</div>
</div>
CSS 样式：
.custom-select {
position: relative;
width: 200px;
}
#mySelect {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0;
pointer-events: none;
z-index: 1;
}
.select-trigger {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
user-select: none;
}
.select-options {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
border: 1px solid #ccc;
background: #fff;
z-index: 2;
}
.custom-select.active .select-options {
display: block;
}
.select-options span {
display: block;
padding: 8px 10px;
cursor: pointer;
}
.select-options span:hover {
background: #f0f0f0;
}
2. 使用 JavaScript 同步状态
点击触发区域时，显示自定义选项，并将用户选择同步回原生 select。
立即学习“前端免费学习笔记（深入）”；
JavaScript 功能逻辑：- 点击 .select-trigger 展开选项列表
- 点击某个选项，更新 trigger 显示文本，并设置对应 select 的 value
- 支持初始化时读取默认选中项
document.querySelectorAll('.custom-select').forEach(function(select) {
const nativeSelect = select.querySelector('select');
const trigger = select.querySelector('.select-trigger');
const options = select.querySelectorAll('.select-options span');
// 初始化显示默认值
trigger.textContent = nativeSelect.options[nativeSelect.selectedIndex].text;
// 点击触发器展开
trigger.addEventListener('click', function() {
select.classList.toggle('active');
});
// 点击选项赋值
options.forEach(option => {
option.addEventListener('click', function() {
const value = this.getAttribute('data-value');
const text = this.textContent;
nativeSelect.value = value;
trigger.textContent = text;
select.classList.remove('active');
// 触发 change 事件（如有监听）
nativeSelect.dispatchEvent(new Event('change'));
});
});
// 点击外部收起
document.addEventListener('click', function(e) {
if (!select.contains(e.target)) {
select.classList.remove('active');
}
});
});
3. 增强体验与兼容性建议
让自定义控件更接近原生行为，提升可用性。
优化点：- 添加键盘支持：按 Enter 展开、方向键切换、Enter 确认
- 保持 focus 样式，用 JS 控制焦点状态
- 为 .select-trigger 添加
tabindex="0"支持 tab 导航 - 使用 ARIA 属性增强无障碍访问，如
role="combobox"、aria-expanded
不要完全移除原生 select，否则表单提交或辅助工具会失效。目标是“视觉替代”，不是“功能替代”。
基本上就这些。不复杂但容易忽略细节。
