Gapped outline as focus state

How to use it

Add a thick outline around the element that's in focus, but with a gap between the element and its outline.

When to use it

This is a visually heavy technique, so use it if you think that other focus states won't stand out. The gap between the element and the outline means that the outline won't interfere with the element as much, and also makes the focus area larger, so it will be more noticeable.

What to watch out for

A focus state like this needs to be quite bold to be noticed, so make sure you have the space to include it. Also make sure that your interface style supports a thick outline like this. It ends up looking quite "chunky", and a lot of interfaces use thinner lines and less noticeable focus states.

Examples

Example