オプションの背景色を塗りつぶすことなくセレクタの背景色を変更するには？

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

白い背景とセレクタエリアでのオプションのオプションは用いて行われることはありませんのためにその

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

セレクタ面積が着色され、オプションが

作業フィドル背景が透明になり、別のCSSを使用します。 https://jsfiddle.net/owgpsf7a/

Answer 2

これを試してください：

.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>* 

Answer 3

私は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");