Back to home
Select menus and keyboard use
Operation
Windows
- TAB to focus on select menu
- Focus appears on select menu
- DOWN ARROW move to next option, UP ARROW to move to previous option
- SPACEBAR to expand (make all optons visible)
- ESC to expand options (make all optons visible) - Windows only
- option chosen using ARROW only
OSX
- TAB to focus on select menu
- Focus appears on select menu
- DOWN ARROW move to next option, UP ARROW to move to previous option
- DOWN ARROW and UP ARROW automatically expand options
- Option chosen using ENTER or SPACE BAR.
Example
Code sample
<form class="example" action="#">
<div>
<label for="fruit">Favourite fruit</label>
<select id="fruit" name="fruit">
<option>Apple</option>
<option>Apricot</option>
<option>Avocado</option>
<option>Banana</option>
<option>Breadfruit</option>
<option>Bilberry</option>
<option>Blackberry</option>
<option>Blackcurrant</option>
<option>Blueberry</option>
<option>Boysenberry</option>
<option>Cantaloupe</option>
<option>Currant</option>
<option>Cherry</option>
<option>Cherimoya</option>
<option>Cloudberry</option>
</select>
</div>
</form>
Bottom of page - Back to home