Focus Styling: Gotcha & Solutions

Gotcha: Problematic Focus (Accessibility Issue)

The input below uses `focus:outline-none` to remove the browser's default focus outline. However, it *does not* provide any alternative visual focus indicator. This makes it very difficult for keyboard users to know which element is active.

Problematic Input (Try tabbing to it)

Notice how there's no clear visual change when this input is focused using the keyboard.

Accessible Focus Styling Solutions

Below are examples of how to correctly provide custom focus styles while using `focus:outline-none`. Each provides a clear visual cue.

Solution 1: Using `focus:border-color`

Key classes: focus:outline-none focus:border-blue-500

Solution 2: Using `focus:ring`

Key classes: focus:outline-none focus:ring-2 focus:ring-green-500

Solution 3: Combining `focus:border` and `focus:ring` (Recommended)

Key classes: focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500