# Clear Keyboard Focus Outlines

> Shows a strong, visible outline around links, buttons and form fields when visitors navigate with the keyboard, which many themes hide. Mouse clicks are not affected.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: accessibility, keyboard, focus, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-focus-visible-outline/

## Code

```css
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2271b1 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
```

## Notes

Change the outline color to one with good contrast against your backgrounds.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Clear Keyboard Focus Outlines" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/