当前位置：首页 > CSS

css 制作下拉列表

2026-04-01 15:38:40CSS

使用HTML和CSS创建基础下拉列表

HTML结构使用<select>和<option>标签构建下拉列表：

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

通过CSS自定义基础样式：

select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  min-width: 200px;
}

自定义下拉箭头样式

隐藏默认箭头并添加自定义图标：

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

创建纯CSS自定义下拉菜单

使用<div>结构实现完全自定义样式：

<div class="custom-dropdown">
  <button class="dropdown-toggle">选择选项</button>
  <ul class="dropdown-menu">
    <li data-value="option1">选项1</li>
    <li data-value="option2">选项2</li>
    <li data-value="option3">选项3</li>
  </ul>
</div>

配套CSS样式：

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  padding: 8px 16px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  background: white;
  display: none;
}

.dropdown-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f0f0f0;
}

.custom-dropdown:hover .dropdown-menu {
  display: block;
}

添加过渡动画效果

为下拉菜单添加平滑显示效果：

.dropdown-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.custom-dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
}

响应式设计考虑

确保下拉菜单在不同设备上正常显示：

@media (max-width: 768px) {
  .custom-dropdown {
    width: 100%;
  }

  .dropdown-toggle {
    width: 100%;
  }
}

无障碍访问优化

添加ARIA属性提升可访问性：

<div class="custom-dropdown" aria-haspopup="true" aria-expanded="false">
  <button class="dropdown-toggle" aria-controls="dropdown1">选择选项</button>
  <ul class="dropdown-menu" id="dropdown1" role="menu">
    <li role="menuitem" tabindex="0">选项1</li>
    <li role="menuitem" tabindex="0">选项2</li>
  </ul>
</div>

通过JavaScript实现键盘导航支持：

css 制作下拉列表

document.querySelectorAll('.dropdown-menu li').forEach(item => {
  item.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.target.click();
    }
  });
});