Firefox Tomorrow

css pseudo element

`::-moz-focus-inner` CSS pseudo-element

View on MDN ↗

The ::-moz-focus-inner CSS pseudo-element is a Mozilla extension that represents an inner focus ring of the <button> element as well as the <button>, <submit>, <reset>, and <color> types of the <input> element.

[!NOTE] Using ::-moz-focus-inner with anything than the buttons that support it doesn’t match anything and has no effect.

Syntax

::-moz-focus-inner {
  /* ... */
}

Example

HTML

<input type="submit" value="Input" /> <button type="submit">Button</button>

CSS

button::-moz-focus-inner,
input[type="color"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  padding-block-start: 0px;
  padding-inline-end: 2px;
  padding-block-end: 0px;
  padding-inline-start: 2px;
  border: 2px dotted red;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

Not part of any standard.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also