0

I am creating an HTML Drop-down. Here is My Code

http://jsfiddle.net/dineshk/u47xjqLv/

HTML

<select>
    <option class="first"  style="display:none;">HH</option>  
    <option class="green">Hello</option> 
    <option>Magazine</option>         

</select>

I have Given first Option to Display:none So that it should not show in the Drop Down List. Thats Working. Cool !!!!, But I am not able to Give color for this first Option Hence it is the Heading of the Drop Down, Please Help me to find the Answer

Dinesh Kanivu
  • 2,551
  • 1
  • 23
  • 55
  • 2
    be careful with `display:none` as it may not work in all browsers. I've asked a similar question a while ago, see [here](http://stackoverflow.com/questions/15025555/js-option-style-display-none-working-in-chrome-but-not-in-safari) – BeNdErR Oct 28 '14 at 11:20
  • You can't style – Adriano Repetti Oct 28 '14 at 11:24

2 Answers2

2

Option 1

You can set the colour on the select and the option giving you a colour for the dropdown and for the placeholder text (HH).

Fiddle

Example

select {
  color: red;
}

select option {
  color: black;
}

Option 2

If the first option (Hello) is purely a heading and you do not want it to be selected, then you should set it to disabled. You can then style this accordingly.

Fiddle

Example

<select>
  <option class="first"  style="display:none;">HH</option>  
  <option disabled class="green">Hello</option> 
  <option>Magazine</option>         
</select>

select option[disabled] {
  color: red;
}
Colin Bacon
  • 15,436
  • 7
  • 52
  • 72
1

You can try it also-

jsfiddle

css:-

option:nth-child(2){color:red}
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53