BugWP logo BugWP
Back to Community
Home / Community / Core → Fixing wordpress

How to Remove or Customize the Blue Focus Outline on Links and Buttons in WordPress

14 threads Sep 7, 2025 Core → Fixing wordpress

Content

Many WordPress users encounter a bright blue outline that appears around links, buttons, or form fields when they are clicked or selected using a keyboard. This outline is a browser's default focus indicator, designed to improve accessibility for keyboard and screen reader users. While it serves an important purpose, its appearance can sometimes clash with a site's design.

This guide will explain why this outline appears and provide the most common CSS solutions to remove or customize it.

Why Does the Blue Outline Appear?

The outline is a native browser feature applied to interactive elements like links (<a> tags) and buttons (<button> tags) when they receive :focus. It is a crucial accessibility feature that helps users who navigate with a keyboard understand which element is currently selected. Completely removing it can make your site difficult or impossible to use for these visitors.

However, you can style it to better match your site's aesthetic without sacrificing accessibility.

Common Solutions to Modify the Focus Outline

The most effective way to change this style is by adding custom CSS to your site. You can do this by navigating to Appearance > Customize > Additional CSS in your WordPress dashboard.

Solution 1: Remove the Outline (Use with Caution)

If you have determined that removing the outline is absolutely necessary, you can use the following code. It is highly recommended to provide an alternative focus style for accessibility.

a:focus, button:focus, input:focus {
    outline: none !important;
}

Important Note: As seen in the sample threads, a user found that simply clearing their browser cache was necessary for the CSS change to take effect after they added it.

Solution 2: Change the Outline Color and Style

A better approach is to customize the outline to match your theme's color scheme. You can change its color, thickness, and style.

a:focus, button:focus {
    outline: 2px solid #your-color-here !important;
    outline-offset: 2px;
}

Replace #your-color-here with a hex code that fits your design (e.g., #ff8a42 for orange).

Solution 3: Investigate Other CSS Properties

Sometimes, what appears to be an outline is actually another CSS property. As one user discovered, an underline on all their links after a WordPress update was not caused by text-decoration but by a box-shadow property. In that case, the fix was:

a {
    box-shadow: none !important;
}

If standard outline changes aren't working, use your browser's inspector tool (right-click on the element and select 'Inspect') to identify the exact CSS property causing the highlight.

When These Solutions Might Not Work

If the custom CSS does not work, consider these possibilities:

  • Browser or Plugin Override: Your theme or a plugin might be using more specific CSS rules. Using !important as in the examples above can help override them.
  • Caching: Your browser or a caching plugin may be serving an old version of your site. Clear all caches after making changes.
  • Theme-Specific Code: Some themes handle focus states differently. If you use a theme like OceanWP or a page builder like Elementor, you may need to consult their specific support communities for the most targeted advice.

By understanding the cause and carefully applying these CSS adjustments, you can successfully control the focus outline to create a visually pleasing and accessible website.

Related Support Threads Support