CSS ::-moz-color-swatch Pseudo-Element

The ::-moz-color-swatch pseudo-element is a Firefox-specific CSS extension used to style the color swatch displayed inside an HTML <input type="color"> control.

Syntax

input[type="color"]::-moz-color-swatch {
  border: 2px solid #333;
}

The pseudo-element is appended to a selector targeting an HTML color input. CSS declarations inside the rule affect the swatch rather than the entire input control.

How It Works

An HTML color input displays a small area showing the currently selected color. In Firefox, ::-moz-color-swatch provides access to that internal swatch for styling.

The pseudo-element does not change the selected color or the color picker's functionality. It changes the appearance of the swatch within the control.

Because this is a browser-specific extension, the result depends on Firefox's implementation and may differ across operating systems.

Styling the Color Swatch

The swatch can be given a custom border or other supported visual styling. For example, a border can help distinguish the selected color from the surrounding input control.

input[type="color"]::-moz-color-swatch {
  border: 2px solid #444;
  border-radius: 4px;
}

These styles apply only where the browser recognizes the pseudo-element. For consistent results across browsers, style the color input itself and treat internal swatch customization as an enhancement.

Example

The following example adds a border and rounded corners to the color swatch in Firefox.

<label for="favorite-color">Choose a color:</label>
<input type="color" id="favorite-color" value="#3366cc">

input[type="color"]::-moz-color-swatch {
  border: 2px solid #333;
  border-radius: 4px;
}

In Firefox, the internal swatch receives the custom styling. Other browsers may display their default swatch appearance.

Browser Support

::-moz-color-swatch is a non-standard, Mozilla-specific pseudo-element. It is intended for Firefox and is not a cross-browser CSS feature.

Chromium-based browsers provide a different browser-specific pseudo-element, ::-webkit-color-swatch, for similar customization.

For current compatibility information, visit Can I Use? and search for color input styling.

Specifications

::-moz-color-swatch is a proprietary Mozilla extension and is not defined as a standard pseudo-element in the CSS Pseudo-Elements specification.