How to Remove Dotted Focus Outlines from Buttons in Firefox?

Eliminating Dotted Focus Outlines in Firefox for Elements Beyond Links

While removing the unsightly dotted focus outline from links in Firefox is straightforward using the CSS property a:focus { outline: none; }, applying the same technique to elements often proves ineffective.

Solution: Utilizing the Mozilla-Specific Pseudo-Element

To eradicate the dotted outline on buttons in Firefox, it is necessary to employ the browser-specific pseudo-element ::-moz-focus-inner. This element allows precise targeting of the focus ring that appears within the button's bounds. By setting its border property to 0, the outline can be effectively hidden.

The CSS code to achieve this is as follows:

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

With this code in place, clicking on a button in Firefox will no longer trigger the appearance of the dotted outline, providing a more aesthetically pleasing and consistent user experience.

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