如何自定义HTML Select下拉框选中项展开后的背景色及hover样式？

• 为HTML <select> 元素的每个<option>设置了不同背景色，但选中某选项后再次展开下拉框时，选中项的背景色会变回默认样式，希望保留自定义颜色编码效果。
• 尝试为选项添加:hover样式时出现样式混乱问题。

解决方案 #

核心修正点 #

1. 修复CSS语法错误
2. 强制覆盖浏览器默认的选中选项高亮样式
3. 优化hover样式避免冲突
4. 简化JS逻辑同步选中状态样式

修正后的完整代码 #

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="label" id="" class="label" onfocus='this.size=5;' onchange='this.size=1;this.blur();'>
  <option class="blank" selected></option>
  <option class="volvo">Volvo</option>
  <option class="saab">Saab</option>
  <option class="opel">Opel</option>
  <option class="audi">Audi</option>
</select>

CSS

.label {
  width: 5.5em;
  border: none;
}

/* 修复原始语法错误 */
.blank {
  background-color: white;
  color: black;
}

.volvo {
  background-color: purple;
  color: white;
}

.saab {
  background-color: red;
  color: white;
}

.opel {
  background-color: yellowgreen;
  color: white;
}

.audi {
  background-color: blue;
  color: white;
}

/* 强制覆盖浏览器默认选中高亮 */
option:checked {
  background-color: inherit !important;
  color: inherit !important;
}

/* 仅对未选中选项应用hover样式，避免冲突 */
option:not(:checked):hover {
  background-color: #ccc !important;
  color: #000 !important;
}

JavaScript

$(document).ready(function() {
  const $select = $('.label');
  
  // 初始化select的样式为默认选中项的样式
  const $initSelected = $select.find('option:selected');
  $select.css({
    'background-color': $initSelected.css('background-color'),
    'color': $initSelected.css('color')
  });

  // 选中选项时同步select的样式
  $select.on('change', function() {
    const $selected = $(this).find('option:selected');
    $(this).css({
      'background-color': $selected.css('background-color'),
      'color': $selected.css('color')
    });
  });

  // 展开下拉框时临时将select背景设为白色（可选，根据需求调整）
  $select.on('focus', function() {
    $(this).css('background-color', 'white');
  });
});

关键说明 #

• 浏览器默认样式覆盖：通过option:checked结合!important强制继承选项自身的自定义颜色，避免浏览器自带的选中高亮样式覆盖自定义设置。
• hover样式优化：使用option:not(:checked):hover限定hover样式的作用范围，防止与选中项的样式产生冲突。
• 简化JS逻辑：仅负责将选中选项的样式同步到<select>元素本身，下拉框内的选项样式完全由CSS维护，避免冗余操作。

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