如何在Select元素中设置选中项的背景颜色？

Question

我已将 Select 元素添加到 Asp.net 页面，并在此元素内的每个选项上设置了 style="background-color: example_color"。如本 answer.

所述

当我调试网站并将选项悬停时，它会突出显示样式属性中指定的正确颜色，但在我 select 它并切换到页面上的另一个元素后，背景颜色是正常的白色，而不是定义的蓝色或绿色。

问题： select编辑后如何设置选项颜色？

Select 元素 selected 后：

代码：

Select 元素标记：

     <div class="form-control">
       <label class="col-md-3 control-label" for="Current Status">Status</label>
       <div class="col-md-8">
          <select id="Status" name="Status" onchange="" class="form-control">
             <option style="background-color: blue" value="Down">Down</option>
             <option style="background-color: green" value="BCR">BCR</option>
          </select>
       </div>
 </div>

Answer 1

<select> 元素通常在任何类型的跨浏览器意义上都很难设置样式，因此请记住这一点，因为这可能不适用于所有浏览器。如果需要，您可能需要求助于第三方库，例如 select.css or some of the suggestions in this thread, which explicitly avoid Javascript-based solutions.

您可以使用选项中可用的 background-color 属性在更改事件期间在父 <select> 元素上设置显式样式属性，如下所示：

<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
         <option style="background-color: blue!important" value="Down">Down</option>
         <option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
    function colorizeMe(element){
      // Use the selected value to set the color
      element.options[element.selectedIndex].style.backgroundColor
      element.setAttribute('style','background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
    }
</script>

示例和代码段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
    <option style="background-color: blue!important" value="Down">Down</option>
    <option style="background-color: green!important" value="BCR">BCR</option>
  </select>
  <script>
    function colorizeMe(element) {
      // Use the selected value to set hte color
      element.options[element.selectedIndex].style.backgroundColor
      element.setAttribute('style', 'background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
    }
  </script>
</body>

</html>

如何在Select元素中设置选中项的背景颜色？

How to set selected item background color in Select element?

c#

asp.net

colors

html-select