Keyboard-only focus test

This page contains various html controls and demonstrates a proposal for only drawing a focus ring when the keyboard is being used. Navigate through the interactive elements various ways (using mouse, switch to keyboard, try it on a touch device). You should see a green focus indicator (or comment out green focus ring style to see default focus ring) on elements below differently based on whether you interact with them via keyboard or mouse. If you are using the mouse and get lost, at any time you can tab/shift-tab to find your focus indicator.

Editable text

Contenteditable with textbox role

Buttons

Selects

Other