# Select keyboard controls

I was recently given a design that included a customised select. Since that’s currently only available in the most recent version of Chrome, I went looking for libraries and instructions on how to create your own select. And I came across a problem: none of them talked about the keyboard controls in a way that matched with how select works for me with the keyboard. Until I considered that I was using Firefox and most people use Chrome. Turns out they don’t work identically. So I went through the main browsers and documented what did what.

## Same for all browsers

Most keyboard controls are the same in all browsers.

### When select is closed:

**Enter**: does nothing  
**Space**: opens select  
**Tab**: goes to next tabbable element  
**Shift + tab**: goes to previous tabbable element  
**Down arrow**: opens select  
**Up arrow**: opens select  
**Any letter key**: selects first/next option that starts with that letter

### When select is open:

**Enter**: selects focused option and closes select  
**Escape**: closes select  
**Down arrow**: focuses next option  
**Up arrow**: focuses previous option  
**Home**: focuses option at top of list  
**End**: focuses option at bottom of list  
**Any letter key**: selects first/next option that starts with that letter

## Different in different browsers

I tested in Firefox, Chrome, Safari and Opera, all on a Mac. Although a Mac has different keyboard shortcuts to Windows and Linux, navigating a website doesn’t seem to be any different on a Mac.

### When select is closed

**Escape**  
Firefox: goes to next tabbable element  
The rest: does nothing

**Page down**  
Firefox: selects option one page down  
The rest: does nothing

**Page up**  
Firefox: selects option one page up  
The rest: does nothing

**Home**  
Firefox: selects option at top of list  
The rest: does nothing

**End**  
Firefox: selects option at bottom of list  
The rest: does nothing

### When select is open

**Space**  
Firefox: does nothing  
The rest: selects focused option and closes select

**Tab**  
Firefox: selects focused option and closes select  
The rest: selects random option

**Shift + tab**  
Firefox: selects focused option and closes select  
The rest: selects random option

**Page down**  
Firefox: focuses option one page down  
The rest: focuses option at bottom of list

**Page up**  
Firefox: focuses option one page up  
The rest: focuses option at top of list