CSS初级项目如何制作自定义下拉选择框_select隐藏与div替代-css教程-PHP中文网

CSS初级项目如何制作自定义下拉选择框_select隐藏与div替代

P粉602998670

发布： 2025-12-02 16:30:52

原创

691人浏览过

通过隐藏原生select并用div模拟，可实现样式自定义的下拉框。1. 使用position:absolute、opacity:0和pointer-events:none隐藏原生select，保留其语义与功能；2. 用JavaScript同步自定义选项与select的值，支持点击展开、选中更新及外部点击收起；3. 增加键盘导航、焦点管理和ARIA属性以提升可用性与无障碍访问，确保控件既美观又功能完整。

css初级项目如何制作自定义下拉选择框_select隐藏与div替代

下拉选择框在网页中很常见，但原生的 <select> 样式受限，难以与整体设计风格统一。通过隐藏原生 select 并用 div 模拟，可以实现完全自定义外观的下拉框。

1. 隐藏原生 select 元素

要自定义样式，先保留语义化结构和表单功能，再隐藏默认外观。

说明：

使用 <select> 保证可访问性和表单提交正常，通过 CSS 将其视觉上隐藏，但仍保留在 DOM 中供屏幕阅读器和后台处理使用。

CSS 隐藏方法（推荐）：

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。

千帆AppBuilder

百度推出的一站式的AI原生应用开发资源和工具平台，致力于实现人人都能开发自己的AI原生应用。

174

查看详情

立即学习“前端免费学习笔记（深入）”；

JavaScript 功能逻辑：

点击 .select-trigger 展开选项列表
点击某个选项，更新 trigger 显示文本，并设置对应 select 的 value
支持初始化时读取默认选中项

JS 实现示例：

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');
    }
  });
});

登录后复制