CSS ::-moz-focus-inner Pseudo-Element

CSS ::-moz-focus-inner Pseudo-Element

The ::-moz-focus-inner pseudo-element was a Mozilla-specific CSS extension used to style the inner focus ring and spacing of certain buttons and input controls in Firefox. It is deprecated and no longer supported in current Firefox versions.

Syntax

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

The pseudo-element was appended to a selector targeting a supported form control. CSS declarations could modify the internal border and padding used by older Firefox versions.

This syntax is retained for reference only. It should not be used for new projects.

How It Works

Older Firefox versions used an internal focus ring for certain buttons and input controls. This ring could introduce additional spacing or a visible border inside the control.

The ::-moz-focus-inner pseudo-element allowed developers to adjust that internal styling without changing the outer button element directly.

It was commonly used in CSS reset stylesheets to remove differences between Firefox buttons and buttons in other browsers.

Modern Firefox no longer uses this pseudo-element, so these legacy rules have no effect.

Affected Form Controls

Historically, ::-moz-focus-inner applied to the following HTML controls:

• <button> elements.
• <input type="button"> elements.
• <input type="submit"> elements.
• <input type="reset"> elements.
• <input type="color"> elements.

The pseudo-element did not apply to every input type. Its behavior depended on Firefox's internal implementation of the supported controls.

Legacy Example

The following CSS was commonly used to remove Firefox's internal button border and padding.

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

In older Firefox versions, this could change the internal spacing and focus appearance of buttons.

Important: Removing focus styling without providing a visible replacement can make keyboard navigation difficult. This legacy technique is no longer necessary and should be removed from modern stylesheets.

Modern Alternative

Use the standard :focus-visible pseudo-class to customize focus indicators for keyboard navigation.

button {
  padding: 10px 16px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}
button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

The first rule styles the button itself. The second rule provides a visible focus indicator when the browser determines that focus should be shown, such as during keyboard navigation.

Unlike ::-moz-focus-inner, :focus-visible is standardized and supported by modern browsers.

Keep focus indicators visible and avoid removing outlines without an accessible replacement.

Browser Support

::-moz-focus-inner is a deprecated, non-standard Mozilla pseudo-element. It was previously supported in Firefox but has been removed from current Firefox implementations.

It is not supported as a standard feature in Chrome, Edge, Safari, or other browsers.

For current compatibility information, visit Can I Use? and search for the relevant pseudo-element or use :focus-visible for modern focus styling.

Specifications

::-moz-focus-inner was a proprietary Mozilla extension and is not defined in a W3C CSS specification.

For standardized focus styling, see the Selectors Level 4 specification .