修改下拉选择菜单（select）选项样式（CSS）

嘿，自定义原生<select>的样式确实是个有点头疼的事儿——不同浏览器对它的样式支持很有限，直接改CSS经常会出现各种奇怪的兼容性问题。不过咱们可以用「隐藏原生控件+自定义外观模拟」的方法来完美解决，既保留原生select的所有交互功能（键盘导航、表单提交等），又能完全控制样式，我给你一步步拆解：

1. 调整HTML结构 #

首先我们需要在原生select旁边加一个自定义的容器，用来显示选中的文本和自定义外观：

<ul class="facilities hide-small">
  <li class="airline">
    <select name="search[airline]" id="search_airline" class="custom">
      <option value="">Alla</option>
      <option value="SK">SAS</option>
      <option value="DY">Norwegian</option>
      <option value="EI">Aer Lingus</option>
      <option value="SU">Aeroflot</option>
      <option value="AR">...</option>
    </select>
    <!-- 新增自定义显示容器 -->
    <div class="custom-select-wrapper">
      <span class="selected-text">Alla</span>
    </div>
  </li>
</ul>

2. 编写CSS样式 #

核心思路是把原生select隐藏（但保留交互能力），让自定义容器占据视觉位置，同时通过定位让原生select覆盖在上方，这样点击自定义容器时其实是触发了原生select的下拉：

/* 给父容器设置相对定位，方便后续元素定位 */
.facilities .airline {
  position: relative;
  width: 220px; /* 根据你的需求调整宽度 */
}

/* 隐藏原生select，但保留它的交互（不能用display:none，会丢失功能） */
.facilities .airline select.custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2; /* 确保它在自定义容器上方，能接收点击/键盘事件 */
}

/* 自定义下拉框的基础外观 */
.facilities .airline .custom-select-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

/* 用伪元素实现下拉箭头 */
.facilities .airline .custom-select-wrapper::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  transition: transform 0.2s ease;
}

/* hover和focus状态的样式（focus时同步自定义容器的样式） */
.facilities .airline .custom-select-wrapper:hover,
.facilities .airline select.custom:focus + .custom-select-wrapper {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

/* 下拉展开时的箭头旋转效果（可选） */
.facilities .airline select.custom:focus + .custom-select-wrapper::after {
  transform: rotate(180deg);
}

3. 用JS同步选中文本 #

原生select的选中内容变化不会自动更新自定义容器的文本，所以需要加一点JS来同步：

const selectEl = document.getElementById('search_airline');
const selectedTextEl = document.querySelector('.selected-text');

// 初始化显示默认选中的文本
selectedTextEl.textContent = selectEl.options[selectEl.selectedIndex].text;

// 监听select的change事件，更新文本
selectEl.addEventListener('change', function() {
  selectedTextEl.textContent = this.options[this.selectedIndex].text;
});

额外说明 #

这个方案的优势是完全保留原生select的所有功能：比如用键盘上下键选择选项、表单提交时能正确传递value值、支持屏幕阅读器等。如果想要自定义下拉选项的样式（比如修改每个选项的背景、字体），那可能需要完全用div模拟下拉列表，但那样需要更多JS来处理展开/收起、选项选择、键盘导航等逻辑，上面的方案是最省心的折中方案，适合大部分场景。

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