Multiple select menus and keyboard use

Operation

TAB to focus on select menu
Focus appears on select menu
Right and down ARROW keys move to next option, back and up ARROW keys move to previous option.
SHIFT to multi-select items.

Example

Code sample

<form class="example" action="#">
	<div>
		<label for="color">Favourite color</label>
		<select id="color" name="color" multiple>
			<option>Amaranth</option>
			<option>Amber</option>
			<option>Amethyst</option>
			<option>Apricot</option>
			<option>Aquamarine</option>
			<option>Azure</option>
			<option>Baby blue</option>
			<option>Beige</option>
			<option>Black</option>
			<option>Blue</option>
			<option>Blue-green</option>
			<option>Blue-violet</option>
		</select>
	</div>
</form>

Bottom of page - Back to home