0

Need to select only first option in select tag and give it different color than the others.

:first-child, :first-of-type, :nth-of-type

HTML

<div class="input">
 <select>
  <option value="" selected disabled>Your interests</option>
  <option value="" >Test</option>
  <option value="" >Test</option>
 </select>

CSS

.input select:first-child
{
    color: gray;
}

Need to make font color of only first option tag to gray. Using first child keeps selecting all option tags and giving them all same gray color. Using bootstrap 4 if it means something.

pagani
  • 11
  • 5
  • How is this a duplicate? I already said and you can see in the test below that i need first one to be gray color. It is black color even with solution given? – pagani Aug 19 '19 at 11:50
  • your selector is wrong, you need to add a space `select :first-child` and this is what the duplicate is explaining – Temani Afif Aug 19 '19 at 11:53

1 Answers1

1

You need to apply css to option not select

.input select option:first-child
{
  color: gray;
}
<div class="input">
  <select>
    <option value="" selected disabled>Your interests</option>
    <option value="" >Test</option>
    <option value="" >Test</option>
  </select>
</div>
Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25
  • I did do that and i get the same result like you. First option tag has black font color. – pagani Aug 19 '19 at 11:39
  • @pagani First option have grey Color when you open select box – Hiren Vaghasiya Aug 19 '19 at 11:52
  • yes i know that, but i need it to be gray from the start. I have already tried your solution. I need first option tag font color to be gray both unselected and selected. – pagani Aug 19 '19 at 12:14
  • @pagani you can not, but alternative solution you can apply black color to select and option with first-child to gray this will color grey which selected and first option also – Hiren Vaghasiya Aug 20 '19 at 04:19