css div制作select
使用CSS制作自定义Select下拉框
通过纯CSS和HTML模拟原生<select>元素的功能和外观，需要结合<div>、隐藏的原生<select>以及JavaScript实现交互。以下是实现方法：
HTML结构
隐藏原生<select>，用<div>模拟可视部分：
<div class="custom-select">
<select class="original-select">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<div class="select-display">选项1</div>
<ul class="select-options">
<li data-value="1">选项1</li>
<li data-value="2">选项2</li>
<li data-value="3">选项3</li>
</ul>
</div>CSS样式
.custom-select {
position: relative;
width: 200px;
}
.original-select {
display: none; /* 隐藏原生select */
}
.select-display {
padding: 8px 12px;
border: 1px solid #ccc;
cursor: pointer;
background: white;
}
.select-options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #ccc;
border-top: none;
background: white;
display: none; /* 默认隐藏下拉选项 */
max-height: 200px;
overflow-y: auto;
}
.select-options li {
padding: 8px 12px;
cursor: pointer;
}
.select-options li:hover {
background: #f0f0f0;
}
/* 展开状态 */
.custom-select.active .select-options {
display: block;
}JavaScript交互
document.querySelector('.select-display').addEventListener('click', function() {
this.parentElement.classList.toggle('active');
});
document.querySelectorAll('.select-options li').forEach(item => {
item.addEventListener('click', function() {
const value = this.getAttribute('data-value');
const text = this.textContent;
// 更新显示值和原生select
document.querySelector('.select-display').textContent = text;
document.querySelector('.original-select').value = value;
// 关闭下拉
this.closest('.custom-select').classList.remove('active');
});
});
// 点击外部关闭下拉
document.addEventListener('click', function(e) {
if (!e.target.closest('.custom-select')) {
document.querySelector('.custom-select').classList.remove('active');
}
});增强功能
- 键盘导航：监听键盘事件实现方向键选择。
- 动画效果：通过CSS过渡（
transition）添加展开/收起动画。 - 多选支持：修改结构为复选框列表，存储多个值。
注意事项
- 确保原生
<select>的值与模拟界面同步，以便表单提交时能正确传值。 - 移动端需额外测试触摸交互的兼容性。
- 可通过
aria-*属性增强无障碍访问支持。
