rango
rango

Reputation: 619

How to change style of particular option in select box?

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?

Upvotes: 2

Views: 1380

Answers (1)

repzero
repzero

Reputation: 8412

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>

Upvotes: 2

Related Questions