How to change style of particular option in select box?

Question

I want to change style (color, borders etc...) of certain option in select box.

Example:

<select name="items">
  <option>Select item:</option>
  <option value="item1"> item1 </option>
  <option value="item2"> item2 </option>
  <option vlaue="item3"> item3 </option>
</select>

First option " Select item: " don't have any value, it is more like title of item list. But Im curious is it possible to change style of that option, and make it a bit different from other options in select box?

http://stackoverflow.com/questions/12836227/change-select-box-option-background-color — bea, Oct 16 '16 at 15:55
good catch..I taught u wanted to style all options in select box... — repzero, Oct 16 '16 at 16:02

repzero · Accepted Answer · 2016-10-16T16:04:25.573

2

select{
  background:red;
}

option:first-child{
  background:yellow;
  color:green;
}

<select name="items">
  <option>Select item:</option>
  <option value="item1"> item1 </option>
  <option value="item2"> item2 </option>
  <option vlaue="item3"> item3 </option>
</select>

edited Oct 16 '16 at 16:04

answered Oct 16 '16 at 15:58

repzero

8,254
2
18
40

How to change style of particular option in select box?

1 Answers1