如何使用HTML和JavaScript自定义下拉菜单并匹配截图样式？

原生<select>标签的样式受浏览器限制，难以精确控制选项高度、悬停色等细节，所以推荐用自定义下拉组件来实现完全匹配截图的样式，以下是具体实现代码：

1. HTML结构 #

构建包含触发按钮和下拉选项列表的容器：

<div class="custom-dropdown">
  <button class="dropdown-trigger">选择选项</button>
  <ul class="dropdown-menu">
    <li class="dropdown-item">选项1</li>
    <li class="dropdown-item">选项2</li>
    <li class="dropdown-item">选项3</li>
    <li class="dropdown-item">选项4</li>
  </ul>
</div>

2. CSS样式（核心样式控制） #

根据截图需求设置宽度、高度、背景色及悬停效果，可直接替换数值匹配截图：

/* 下拉容器 */
.custom-dropdown {
  position: relative;
  width: 200px; /* 替换为截图中的下拉宽度 */
}

/* 触发按钮样式 */
.dropdown-trigger {
  width: 100%;
  height: 40px; /* 按钮高度，匹配截图 */
  background-color: #f5f5f5; /* 按钮背景色，用取色器从截图提取 */
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  padding: 0 12px;
  font-size: 14px;
}

/* 下拉菜单容器 */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff; /* 下拉菜单背景色 */
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: none; /* 默认隐藏 */
}

/* 下拉选项样式 */
.dropdown-item {
  height: 36px; /* 选项高度，匹配截图 */
  line-height: 36px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
}

/* 选项悬停效果 */
.dropdown-item:hover {
  background-color: #e6f2ff; /* 悬停背景色，从截图提取 */
}

/* 菜单显示状态 */
.custom-dropdown.active .dropdown-menu {
  display: block;
}

3. JavaScript交互逻辑 #

处理菜单的显示/隐藏，以及选项点击后的内容更新：

const dropdown = document.querySelector('.custom-dropdown');
const triggerBtn = dropdown.querySelector('.dropdown-trigger');
const menuItems = dropdown.querySelectorAll('.dropdown-item');

// 点击触发按钮切换菜单显示
triggerBtn.addEventListener('click', () => {
  dropdown.classList.toggle('active');
});

// 点击选项后更新按钮文本并关闭菜单
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    triggerBtn.textContent = item.textContent;
    dropdown.classList.remove('active');
  });
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.remove('active');
  }
});

调整提示 #

• 用取色器工具（比如系统自带的颜色拾取器）从截图中提取精确的背景色、悬停色值，替换CSS中的颜色代码
• 根据截图的实际尺寸修改width、height数值
• 如果需要支持键盘导航（比如上下键选择），可以给JS添加键盘事件监听逻辑

内容的提问来源于stack exchange，提问作者hharry_tech