A non-CSS – no JavaScript/jQuery answer:
I just stumbled across this question, and here’s what works in Firefox and Chrome (at least):
The Disabled option stops the
Google Chrome – v.43.0.2357.132
Mozilla Firefox – v.39.0
Safari – v.8.0.7 (the placeholder is visible in dropdown, but it is not selectable)
Microsoft Internet Explorer – v.11 (Placeholder is visible in dropdown but is not selectable)
Project Spartan – v.15.10130 (the placeholder is visible in dropdown, but it is not selectable)
Update (October 2015):
I removed the style=”display: none” in favour of HTML5 attribute hidden which has wide support. The hidden element has similar traits as display: none in Safari, Internet Explorer, (Project Spartan needs checking) where the option is visible in dropdown, but it is not selectable.
Update (January 2016):
When the select element is required it allows use of the :invalid CSS pseudo-class which allows you to style the select element when in its “placeholder” state. :invalid works here because of the empty value in the placeholder option.
Once a value has been set, the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.
Most browsers support this pseudo-class. Internet Explorer 10 and later. This works best with custom styled select elements; in some cases i.e. (Mac in Chrome / Safari) you’ll need to change the default appearance of the select box so that certain styles display, i.e., background-color and color. You can find some examples and more about compatibility at developer.mozilla.org.
Native element appearance Mac in Chrome:
Using altered border element Mac in Chrome: