How to Remove the Dotted Outline in Firefox on Buttons and Links?

How to Remove Firefox's Dotted Outline on Buttons and Links

Understanding the Issue

When navigating web pages in Firefox, you may have encountered an annoying dotted outline around buttons and links when they gain focus. This default behavior can detract from the aesthetic of your designs.

Removing Dotted Outline on Links

To remove the dotted outline on links, you can use the following CSS rule:

a:focus {
    outline: none;
}

Removing Dotted Outline on Buttons

For buttons, the simple button:focus { outline: none; } rule may not be sufficient. In addition to removing the outline from the element itself, you must also remove the outline from the inner focus ring, which Firefox uses to indicate focus. This can be done with the following rule:

button::-moz-focus-inner {
  border: 0;
}

Note

While it is technically possible to hide the focus outline, it is a usability concern. Removing the outline may make it difficult for users to identify which element has focus. Consider providing alternative focus hints that are suitable for your design.

The above is the detailed content of How to Remove the Dotted Outline in Firefox on Buttons and Links?. For more information, please follow other related articles on the PHP Chinese website!