Make a placeholder for select box

[PloMar]

I'm using placeholders for input fields which is working out just fine. But I'd like to use a placeholder for select options list as well.
Of course I can just use this code:

Code: Select all

<select name="sname">
  <option value="">Select your option</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
</select>

But the "Select your option" can be selected, and is in black instead of lightgrey.
So, is there any HTML-CSS based solution to make a placeholder for select box.

Add the "disabled" and "selected" attributes in the first <option> used as placeholder.
- disabled : stops the Option being selected with both mouse and keyboard.
- selected : makes the option as default selection.

Code: Select all

<select name="sname">
  <option value="" disabled selected>Select your option</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
</select>

Demo:

Select your option Option 1 Option 2