当前位置：首页 > CSS

css制作下拉选框

2026-03-12 16:06:39CSS

CSS 制作下拉选框的方法

使用纯 CSS 制作下拉选框可以通过 <select> 元素结合 CSS 样式来实现，或者通过自定义 HTML 结构模拟下拉选框的行为。

css制作下拉选框

使用原生 `<select>` 元素

直接对 <select> 元素应用 CSS 样式，但原生下拉选框的样式定制有限，通常只能调整颜色、边框等基础样式。

css制作下拉选框

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

.custom-select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 16px;
  width: 200px;
}

.custom-select:focus {
  outline: none;
  border-color: #007bff;
}

自定义下拉选框

如果需要更灵活的样式，可以通过 <div> 和 <ul> 结构模拟下拉选框，结合 CSS 和 JavaScript 实现交互效果。

<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>

.custom-dropdown {
  position: relative;
  width: 200px;
}

.dropdown-toggle {
  padding: 8px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 1000;
}

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

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

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

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  document.querySelector('.custom-dropdown').classList.toggle('active');
});

document.querySelectorAll('.dropdown-menu li').forEach(item => {
  item.addEventListener('click', function() {
    document.querySelector('.dropdown-toggle').textContent = this.textContent;
    document.querySelector('.custom-dropdown').classList.remove('active');
  });
});

使用 CSS 伪类实现简单交互

如果不需要复杂功能，可以通过 :hover 或 :focus 伪类实现下拉菜单的显示与隐藏。

<div class="hover-dropdown">
  <button class="dropdown-btn">悬停展开</button>
  <div class="dropdown-content">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

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

.dropdown-btn {
  padding: 8px 16px;
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.hover-dropdown:hover .dropdown-content {
  display: block;
}