Placeholder for HTML Select box

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)

CSS hover menus with Microsoft Surface (touch device)

If you have a css hover menu you may notice that it doesn't play well with Microsoft Surface IE with either a touch pen or finger. A long press shows the menu but on releasing the menu hides again.

This is because the touch device is unaware that the hover menu is supposed to remain visible after the hover intent has ended. iOS and other touch operating systems handles this logically but the powers to be seem to require websites to be "touch optimised".

Here's what you need to do:

<nav>
	<ul>
		<li>
			<a>Hover menu</a>
			<ul>
				<li><a href="http://example.org">Item 1</li>
				<li><a href="http://example.org">Item 2</li>
				<li><a href="http://example.org">Item 3</li>
			</ul>
		</li>
	</ul>
</nav>

You'll need to make sure that your hover anchor has an href on it to make it "touchable" on certain devices, you can do this with either href="#" or href="javascript:void" , then you need to add aria-haspopup="true" to tell the device that after the user releases the tap, whatever was visible should remain visible until another interaction.

<nav>
	<ul>
		<li>
			<a aria-haspopup="true" href="#">Hover menu</a>
			<ul>
				<li><a href="http://example.org">Item 1</li>
				<li><a href="http://example.org">Item 2</li>
				<li><a href="http://example.org">Item 3</li>
			</ul>
		</li>
	</ul>
</nav>