更改选择时的下拉颜色

Question

我有一个下拉列表，每个选项都有不同的颜色，但是当选择该选项时，我希望选择的背景更改为我选择的颜色。

我找到了这个查询的答案，但是这使用了内联样式，我想使用我的外部CSS。

Changing color of a row in dropdown list

See My JSFiddle

<select name="select" style="background-color: #ff0000" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor;">
 <option style="background-color: #ff0000" value="1">Red</option>
 <option style="background-color: #00ff00" value="2">Green</option>
 <option style="background-color: #0000ff" value="3">Blue</option>
</select>

Answer 1

如果你想使用外部css，那么

<select name="select" class="Red" onchange="this.className = this.options[this.selectedIndex].className">
  <option class="Red" value="1">Red</option>
  <option class="Green" value="2">Green</option>
  <option class="Blue" value="3">Blue</option>
</select>

这是更新后的jsfiddle