为何HTML中select的option元素CSS样式不生效？

问题根源 #

原生<select>的下拉选项由浏览器原生UI控件渲染，不属于标准DOM样式的完全可控范围，直接给<option>设置hover背景色、border-radius等样式通常无法生效，不同浏览器的表现也存在差异。

解决方案 #

方案一：针对WebKit内核浏览器的部分兼容（仅Chrome/Safari生效） #

通过WebKit专属伪元素可以部分修改下拉选项样式，仅支持Chrome、Safari等WebKit内核浏览器：

#fruit {
    margin-left: 150px;
    width: 225px;
    height: 42px;
    border-radius: 12px;
    font-size: 24px;
    border: none;
    font-weight: lighter;
    box-shadow: inset 1px 1px 5px rgba(0,0,0, 0.8);
    padding-left: 50px;
    overflow-y: auto;
    max-height: 150px;
  }

/* WebKit下拉列表容器样式 */
#fruit::-webkit-dropdown-list {
  background: #fff;
  border-radius: 12px;
}

/* WebKit选项基础样式 */
#fruit::-webkit-option {
  font-size: 24px;
  color: #333;
  padding: 10px;
}

/* WebKit选项hover样式 */
#fruit::-webkit-option:hover {
  background-color: #cef106;
  color: #000;
  border-radius: 12px;
}

方案二：完全自定义下拉组件（推荐，跨浏览器一致） #

用HTML结构模拟原生<select>的功能，所有样式可完全控制，步骤如下：

1. 修改HTML结构

<div class="blackbar" id="blackbar">
  <div class="title">
    <span id="titleText">Screen</span>
    <input class="search" type="text" id="search" placeholder="Search Movie" >

    <!-- 自定义下拉容器 -->
    <div class="custom-select" id="customFruit">
      <div class="select-trigger">Apple</div>
      <ul class="select-options">
        <li data-value="apple">Apple</li>
        <li data-value="banana">Banana</li>
        <li data-value="orange">Orange</li>
        <li data-value="grape">Grape</li>
      </ul>
    </div>
    <!-- 保留原生select用于表单提交（可选） -->
    <select class="dropdown" id="fruit" style="display: none;">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
      <option value="grape">Grape</option>
    </select>
  </div>
</div>

2. 添加CSS样式

/* 自定义下拉容器 */
.custom-select {
  margin-left: 150px;
  position: relative;
  width: 225px;
}

/* 选中值显示框 */
.select-trigger {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: lighter;
  box-shadow: inset 1px 1px 5px rgba(0,0,0, 0.8);
  padding-left: 50px;
  line-height: 42px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

/* 下拉箭头（可选） */
.select-trigger::after {
  content: "▼";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

/* 下拉选项列表 */
.select-options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 100;
}

/* 选项基础样式 */
.select-options li {
  font-size: 24px;
  color: #333;
  padding: 10px 50px;
  cursor: pointer;
  border-radius: 12px;
  margin: 5px;
}

/* 选项hover样式 */
.select-options li:hover {
  background-color: #cef106;
  color: #000;
}

/* 下拉列表展开状态 */
.custom-select.active .select-options {
  display: block;
}

3. 添加交互逻辑（JavaScript）

const customSelect = document.getElementById('customFruit');
const trigger = customSelect.querySelector('.select-trigger');
const options = customSelect.querySelectorAll('.select-options li');
const nativeSelect = document.getElementById('fruit');

// 点击触发器切换下拉显示
trigger.addEventListener('click', () => {
  customSelect.classList.toggle('active');
});

// 点击选项更新选中值
options.forEach(option => {
  option.addEventListener('click', () => {
    const value = option.getAttribute('data-value');
    const text = option.textContent;
    trigger.textContent = text;
    // 同步原生select的值（用于表单提交）
    nativeSelect.value = value;
    customSelect.classList.remove('active');
  });
});

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

这个方案的优势是完全自定义样式，hover背景色、border-radius都能正常生效，且跨浏览器表现一致，还可扩展搜索、多选等更多功能。

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