如何更改选择器背景颜色而不填充选项背景颜色？

Question

当我更改我的选择的背景颜色时，它会显示所有选项。但我想得到UI如下。如何仅更改背景颜色选择区域。

页面加载时

Jquery。

$("#age1").css("background-color", "#fe5a5f"); 

<select id="age1">
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21" selected="">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option> 
</select>

Answer 1

使用另一个css作为白色背景的选项选项，选择区域不会受到

的影响

$("#age1").css("background-color", "#fe5a5f"); 
$("#age1 option").css("background-color", "transparent"); 

选择区域将被着色，选项将是透明背景

工作小提琴：https://jsfiddle.net/owgpsf7a/

Answer 2

请试试这个..我已经对Gurav aggarwals小提琴做了一个小编辑    https://jsfiddle.net/owgpsf7a/1/

<select id="age1">
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21" selected="">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option> 
</select>

CSS

#age1{
  background-color:green;
}
#age1 option{
  background-color:pink;
}

jquery的

$("#age1").css("background-color", "green"); 
$("#age1 option").css("background-color", "transparent"); 

Answer 3

请试试这个：

.green {
    background-color: green;
}
.orange {
    background-color: orange;
}
.pink {
    background-color: pink;
}

Jquery的

$("#color_me").change(function(){
    var color = $("option:selected", this).attr("class");
    $("#color_me").attr("class", color);
});

HTML

*<select id="color_me" class="">
    <option class="green">successful</option>
    <option class="orange">process failure</option>
    <option class="pink">abandoned</option>
</select>*