Select boxes don't currently support the 'placeholder' attribute, so here's a workaround that works just as well.
<option value="" disabled selected hidden>Please Choose...</option>
<option value="0">Open when powered (most valves do this)</option>
<option value="1">Closed when powered, auto-opens when power is cut</option>
The Disabled option stops the <option> being selected with both mouse and keyboard, whereas just using display: none allows the user to still select via the keyboard arrows. The display: none style just makes the list box look 'nice'.
Note: Using an empty value attribute on the "placeholder" option allows validation (required attribute) to work around having the "placeholder", so if the option isn't changed but is required; the browser should prompt the user to choose an option from the list.
This method is confirmed working in the following browsers:
- Google Chrome - v.43.0.2357.132
- Mozilla Firefox - v.39.0
- Safari - v.8.0.7 (Placeholder is visible in dropdown but is not selectable)
- Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)
- Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)
select element is
required it allows use of the
:invalid CSS pseudo-class which allows you to style the
select element when in it's "placeholder" state.
:invalid works here because of the empty value in the placeholder
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. IE10+. This works best with custom styled
selectelements; 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.
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: