gorans93 gorans93 - 1 month ago 6
CSS Question

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?

Answer

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>

Comments