Beyond · Forms and focus

Focus and tab order

Only some elements can hold focus: button, input, textarea, select, a <summary>, and an <a> with an href. Whichever one is focused receives the keyboard. Tab moves focus to the next focusable element in document order, Shift+Tab to the previous — the same cycling you get in a browser form.

Focus is invisible until you style it. The :focus pseudo-class matches the control that currently holds focus, so a border or colour change on :focus is how the user sees where they are. The starting form has an input and two buttons with no focus styling, so Tab moves focus but nothing on screen tells you where it went.

Your turn

Make the focused control stand out:

input:focus {
    border-color: cyan;
}
button:focus {
    border-color: cyan;
    color: yellow;
}

Press Run, then press Tab a few times — focus walks input → Add → Clear and wraps around, and the focused control lights up. Solve shows the finished version; Reset restores the start.