如何使用HTML和CSS实现目标下拉菜单样式（附现有代码）

原生<select>元素的样式在不同浏览器中兼容性受限，很难直接修改成你想要的样式。我们可以通过容器包裹+自定义样式的方式来实现目标效果，具体步骤如下：

实现思路 #

1. 用容器<div class="custom-select">包裹原生<select>，承载自定义箭头与边框样式
2. 隐藏原生<select>的默认下拉箭头，替换为自定义样式（用CSS伪元素实现，无需额外图片）
3. 统一美化<select>的背景、边框、内边距，使其与容器样式匹配
4. 处理hover、focus等交互状态

完整代码 #

HTML 代码 #

<div class="custom-select">
  <select id="select">
    <option value="">All Categories</option>
    <option value="Aston Martin">Aston Martin</option>
    <option value="Audi">Audi</option>
    <option value="Bentley">Bentley</option>
    <option value="Genesis">Genesis</option>
    <option value="Volvo">Volvo</option>
    <option value="VW">VW</option>
  </select>
</div>

CSS 代码 #

/* 自定义下拉容器 */
.custom-select {
  position: relative;
  width: 220px; /* 按需调整宽度 */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

/* 移除原生select默认箭头与样式 */
.custom-select select {
  width: 100%;
  padding: 8px 30px 8px 12px;
  border: none;
  background-color: #fff;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* 自定义下拉箭头 */
.custom-select::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #666;
  pointer-events: none; /* 点击箭头穿透到select */
}

/* 交互状态样式 */
.custom-select select:hover,
.custom-select select:focus {
  outline: none;
  background-color: #f5f5f5;
}

.custom-select:hover {
  border-color: #999;
}

代码说明 #

• appearance: none：核心属性，移除浏览器对<select>的默认样式控制
• 容器position: relative配合伪元素absolute，实现自定义箭头的精准定位
• pointer-events: none：确保点击自定义箭头时，实际触发<select>的下拉事件
• 可根据目标样式调整颜色、边框圆角、内边距等参数，比如更换箭头字符、调整边框阴影或背景色

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