Select boxes don't currently support the 'placeholder' attribute, so here's a workaround that works just as well.
<select> <option value="" disabled selected style="display: none;">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> </select>
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)