How to change selector background color without filling options background colors?

When i change background color of my select, its appear to all options. But i want to get UI as follows. How to change background color only selector area.

Jquery when page is load.

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

enter image description here

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

Answers 1

  • please try this..I have made a small editting to Gurav aggarwals fiddle 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"); 
    

Related Articles