Make First option as gray and other as black in Select

Question

Following is my code which is working fine in Firefox 68.0.2 but not on Chrome 76 and Safari 12.1.2. Let me know a workaround or what I am doing wrong here.

I want to make the first select option as gray and rest of the option as black.

Code -

$(document).ready(function(){

  $("select").change(function(){
    if ($(this).val()=="") $(this).css({color: "#aaa"});
    else $(this).css({color: "#000"});
  });
  
});

select{
  color:#aaa;
}
option:not(first-child) {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
 <option value="">Please select and option</option>
 <option>#1</option>
 <option>#2</option>
 <option>#3</option>
 <option>#4</option>
</select>

@LaljiTadhani Accepted answer in the link you attached is keeping all text in same color — Nesh, Aug 26 '19 at 05:23
https://stackoverflow.com/questions/17608880/how-to-change-the-text-color-of-first-select-option — Parth Raval, Aug 26 '19 at 05:26
@LaljiTadhani Open your JSFiddle in Firefox and see its not working ..the First option remains black on selection — Nesh, Aug 26 '19 at 05:28

score 0 · Answer 1 · answered Aug 26 '19 at 05:32

Change CSS

select{
      color:#aaa;
    }
    option{
      color:#000;
    }
    option:first-child {
      color: #aaa;
    }

$(document).ready(function(){

  $("select").change(function(){
    if ($(this).val()=="") $(this).css({color: "#aaa"});
    else $(this).css({color: "#000"});
  });
  
});

select{
  color:#aaa;
}
option{
  color:#000;
}
option:first-child {
  color: #aaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
 <option value="">Please select and option</option>
 <option>#1</option>
 <option>#2</option>
 <option>#3</option>
 <option>#4</option>
</select>

score 0 · Answer 2 · answered Aug 26 '19 at 05:33

Give color property of option:first-child as grey and others are black. Like this

$(document).ready(function(){

  $("select").change(function(){
    if ($(this).val()=="") $(this).css({color: "#aaa"});
    else $(this).css({color: "#000"});
  });
  
});

select option { color: black; }
select option:first-child{
 color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
 <option value="">Please select and option</option>
 <option>#1</option>
 <option>#2</option>
 <option>#3</option>
 <option>#4</option>
</select>

Make First option as gray and other as black in Select

2 Answers2