HTML选择框选中项背景色设置及hover效果禁用问题

嘿，我来帮你解决这两个原生select的样式痛点～ 原生select的样式确实有点“顽固”，不过结合CSS和jQuery就能轻松搞定，分两部分说：

1. 让选中项显示对应颜色 #

原生select的选中状态不会自动继承option的背景色，所以我们得用JS来同步颜色：

第一步：先确认你的CSS颜色类定义好 #

比如：

.selectionpurple { background-color: purple; color: #fff; }
.selectionblue { background-color: blue; color: #fff; }
.selectionred { background-color: red; color: #fff; }
.selectiongreen { background-color: green; color: #fff; }
.selectionorange { background-color: orange; color: #000; }

（橙色选项用黑色文字会更清晰哦）

第二步：用jQuery同步选中状态的颜色 #

我们监听select的选择事件，把select的背景色改成选中option的对应颜色：

$(document).ready(function() {
  // 页面加载时先初始化默认选中项的颜色
  updateSelectColor($('#color'));
  
  // 监听选择变化，实时更新颜色
  $('#color').on('change', function() {
    updateSelectColor($(this));
  });
});

// 封装更新颜色的函数，方便复用
function updateSelectColor($select) {
  // 获取选中option的类名
  var selectedClass = $select.find('option:selected').attr('class');
  // 先清空之前的颜色类，再添加新的
  $select.removeClass('selectionpurple selectionblue selectionred selectiongreen selectionorange')
         .addClass(selectedClass);
}

这样用户选哪个选项，select的背景色就会跟着变啦～

2. 禁用Option的Hover蓝色高亮 #

不同浏览器对option的hover样式处理不一样，我们用CSS强制覆盖默认样式：

/* 针对Chrome、Safari等WebKit浏览器 */
#color option:hover {
  background-color: inherit !important;
  color: inherit !important;
}

/* 针对Firefox浏览器 */
#color option {
  -moz-appearance: none;
}
#color option:hover {
  background-color: inherit !important;
}

用!important是为了确保我们的样式能盖过浏览器的默认蓝色高亮，让hover时还是显示option本身的颜色。

动态添加选项的注意事项 #

你说选项是点击按钮通过jQuery添加的，那添加新选项后，如果需要默认选中新选项，记得调用updateSelectColor函数同步颜色，举个例子：

// 假设点击按钮添加黄色选项
$('button').click(function() {
  // 添加新选项
  $('#color').append('<option class="selectionyellow" value="yellow">yellow</option>');
  // 选中新选项
  $('#color').val('yellow');
  // 更新select的颜色
  updateSelectColor($('#color'));
});

别忘了给.selectionyellow加对应的CSS样式哦～

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