Purpose of the `::-moz-focus-inner` Rules in normalize.css: Firefox Focus Normalization

The ::-moz-focus-inner rules in normalize.css eliminate Firefox's proprietary inner focus border and padding from buttons and form inputs, ensuring consistent cross-browser rendering and a predictable box model.

The necolas/normalize.css repository provides a modern, HTML5-ready CSS reset that preserves useful browser defaults while removing rendering inconsistencies. Understanding the purpose of the ::-moz-focus-inner rules in normalize.css is essential for developers who need to maintain visual parity across browsers without unexpected layout shifts from Firefox-specific focus styling.

What Is ::-moz-focus-inner?

Firefox's Anonymous Focus Element

Firefox (Gecko) creates an inner anonymous element for native <button> elements and input elements of type button, reset, and submit. When these controls receive focus, Gecko automatically applies internal border and padding properties to this pseudo-element. This implementation causes two specific problems:

• Content shifting: The inner padding pushes button content slightly from its unfocused position.
• Box model inconsistencies: The additional border alters the effective dimensions of the element, breaking layouts designed for consistent sizing across browsers.

Other rendering engines—such as Blink (Chrome/Edge) and WebKit (Safari)—do not implement this inner focus element, making this normalization necessary for cross-browser consistency.

The Implementation in normalize.css

According to the source code in the necolas/normalize.css repository at normalize.css lines 206-210, the stylesheet specifically targets this Mozilla-only pseudo-element to strip the default styling:

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

This rule explicitly sets border-style: none to eliminate the inner focus border and padding: 0 to remove the internal spacing, preventing the unwanted visual offset that occurs exclusively in Firefox.

Why This Normalization Matters

Cross-Browser Visual Parity

Chrome, Safari, and Edge render button focus states by applying outlines or borders directly to the element box. Without the ::-moz-focus-inner normalization, Firefox buttons would display an additional inner border that creates visual discrepancies and makes pixel-perfect layouts impossible to achieve across all browsers.

Predictable Box Model

The inner padding and border added by Gecko's default stylesheet alter the computed dimensions of focused buttons. By removing these properties in normalize.css, developers can rely on consistent width, height, and content positioning regardless of whether the element has focus or which browser renders it.

Foundation for Custom Focus Styles

After clearing the native inner focus styling, normalize.css restores accessible focus indicators using the :-moz-focusring pseudo-class at lines 218-222. This approach creates a clean foundation for developers to implement custom focus styles—such as outline rings or box-shadow effects—without interference from Firefox's default inner border artifacts.

Practical Code Examples

Basic Usage

To apply this normalization in your project, include the stylesheet in your HTML head:

<link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">

Once loaded, all <button> elements and submit inputs will render without the inner focus border in Firefox, matching the appearance in other modern browsers.

Implementing Custom Focus States

With the default inner border removed by normalize.css, you can style focus states consistently across all browsers:

button:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

Because the ::-moz-focus-inner rules already cleared the native Firefox styling, this custom outline appears cleanly without competing against extra internal padding or borders.

Restoring Firefox Defaults

In rare cases where you require the original Firefox behavior—such as when matching legacy system UI patterns—override the normalization:

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border: initial;
  padding: initial;
}

Note: Overriding these rules is generally discouraged unless you have a specific requirement to maintain Firefox's native widget appearance.

Summary

• The ::-moz-focus-inner rules in normalize.css (lines 206-210) remove Firefox's default inner focus border and padding from buttons and form inputs.
• This normalization ensures cross-browser visual parity by eliminating a Gecko-specific rendering quirk not present in Chrome, Safari, or Edge.
• Developers gain a predictable box model where button dimensions remain consistent regardless of focus state or browser engine.
• The rules work in conjunction with :-moz-focusring (lines 218-222) to provide an accessible, clean foundation for implementing custom focus indicators.

Frequently Asked Questions

What does ::-moz-focus-inner actually target?

The ::-moz-focus-inner pseudo-element targets an anonymous inner element that Firefox (Gecko) generates within native buttons and input elements of type button, reset, and submit. This internal element receives default border and padding properties when the parent control gains focus, creating a visual effect not replicated in other browsers.

Why does Firefox add an inner focus border?

Firefox adds the inner focus border as part of its native widget styling to provide a visual indication of keyboard focus. However, this implementation detail—applied to an anonymous inner element—differs from other browsers that apply focus indicators directly to the element's outer box, necessitating normalization for consistent cross-browser design.

Will removing these styles break keyboard accessibility?

No. The normalize.css source code maintains accessibility by restoring focus indicators through the :-moz-focusring pseudo-class at lines 218-222 after removing the inner border. This ensures Firefox users still receive clear focus feedback while allowing developers to implement consistent, accessible custom focus styles without fighting against proprietary default styling.

Where exactly are these rules located in the repository?

The ::-moz-focus-inner normalization rules are located in the normalize.css file at lines 206-210 within the necolas/normalize.css repository. The complementary focus restoration rules using :-moz-focusring appear immediately after at lines 218-222 in the same file.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}