CSS ::checkmark Pseudo-Element

CSS ::checkmark Pseudo-Element

The ::checkmark pseudo-element represents the selection indicator displayed beside the currently selected option in a customizable HTML <select> menu. It allows developers to change the appearance, position, and content of the checkmark without adding extra HTML elements.

Syntax

option::checkmark {
  color: #0066cc;
  font-weight: bold;
}

The option selector targets HTML <option> elements.

The ::checkmark pseudo-element targets the checkmark displayed beside the selected option in a customizable select menu.

The color property changes the checkmark's color, while font-weight controls its text weight when the indicator uses a text glyph.

The pseudo-element can also use the content property to replace the default checkmark with another symbol.

Important: The ::checkmark pseudo-element is designed for customizable select menus. It does not provide a general-purpose way to style checkboxes or ordinary native select menus.

How It Works

In a customizable select menu, the browser can generate a checkmark beside the currently selected option.

This indicator helps users identify which option is selected when the dropdown is open.

The ::checkmark pseudo-element provides a CSS styling target for that generated indicator.

For example:

option::checkmark {
  color: #0066cc;
  font-size: 18px;
}

This rule changes the checkmark's color and font size in browsers that support customizable select elements and the ::checkmark pseudo-element.

The checkmark is generated by the browser. Developers do not need to add a checkmark character to each <option> element.

The browser continues to manage which option is selected.

Changing the checkmark's appearance does not change the underlying value submitted by the form.

Customizable Select Elements

Traditional HTML select menus are largely controlled by the browser and operating system.

Customizable select elements provide additional CSS styling capabilities for the select control and its dropdown options.

To opt into customizable select rendering in supporting browsers, use appearance: base-select on the select element and its picker.

select,
::picker(select) {
  appearance: base-select;
}

The appearance: base-select value requests the browser's customizable select appearance.

The ::picker(select) pseudo-element targets the dropdown picker associated with a customizable select element.

Once the customizable appearance is enabled, developers can style supported internal components, including the option checkmark.

The following HTML uses a standard select element:

<label for="color-choice">Choose a color:</label>
<select id="color-choice" name="color-choice">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

The HTML remains a native select control. The customizable appearance changes how supporting browsers render and expose its visual components.

Browsers without customizable select support generally continue to display the standard native select interface.

Styling the Checkmark

The ::checkmark pseudo-element can be styled with text and layout properties in supporting implementations.

option::checkmark {
  color: #0066cc;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

The color property changes the indicator's color.

The font-size and font-weight properties adjust the appearance of the checkmark glyph.

The margin-right property adds spacing between the checkmark and the option text when the checkmark appears before the text.

For a more distinctive appearance, the indicator can also use a background color and padding.

option::checkmark {
  color: #fff;
  background: #0066cc;
  padding: 2px 5px;
  border-radius: 4px;
}

This example creates a blue background behind the checkmark.

The exact rendering depends on the browser's support for customizable select components and the applied CSS properties.

Changing the Checkmark Symbol

The content property can replace the default selection indicator with another character or symbol.

Using a Checkmark

option::checkmark {
  content: "\2713";
  color: #008000;
}

The Unicode escape \2713 represents a checkmark character.

Using a Filled Circle

option::checkmark {
  content: "\25CF";
  color: #0066cc;
}

The Unicode escape \25CF represents a filled circle.

Using a Star

option::checkmark {
  content: "\2605";
  color: #cc6600;
}

The Unicode escape \2605 represents a filled star.

These examples change the visual indicator without modifying the option's actual selected state.

Choose symbols that are easy to recognize and provide sufficient contrast with the option background.

Example

The following example creates a customizable select menu with a blue checkmark and styled dropdown options.

HTML:

<label for="css-topic">Choose a CSS topic:</label>
<select id="css-topic" name="css-topic">
  <option value="selectors">CSS Selectors</option>
  <option value="properties">CSS Properties</option>
  <option value="pseudo-elements">CSS Pseudo-Elements</option>
</select>

CSS:

select,
::picker(select) {
  appearance: base-select;
}
select {
  min-width: 250px;
  padding: 10px 14px;
  border: 1px solid #999;
  border-radius: 5px;
  background: #fff;
  color: #333;
  font-size: 16px;
  cursor: pointer;
}
::picker(select) {
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
}
option {
  padding: 10px;
  color: #333;
}
option:hover {
  background: #f0f5ff;
}
option:checked {
  background: #e6f0ff;
}
option::checkmark {
  content: "\2713";
  color: #0066cc;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}
select:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

In a supporting browser, the select menu uses the customizable appearance.

When the dropdown opens, the selected option displays a blue checkmark beside its text.

The option:checked rule adds a light blue background to the selected option.

The option:hover rule provides a visual highlight when the pointer moves over an option.

The :focus-visible rule provides a visible outline when the select control receives keyboard focus.

In browsers without customizable select support, the control remains a standard HTML select menu, and the custom checkmark styling may not appear.

Note: The result depends on browser support for appearance: base-select, ::picker(select), and ::checkmark. A static Browser Result cannot accurately reproduce the browser-managed dropdown across all browsers.

Changing the Checkmark Position

In customizable select menus, option layout can be adjusted using CSS.

For example, a flex layout can place the checkmark after the option text.

option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
option::checkmark {
  order: 1;
  margin-left: 12px;
  color: #0066cc;
}

The display: flex declaration creates a flex layout for the option's contents.

The order: 1 declaration places the checkmark after the option's other flex items when those items retain their default order.

The margin-left property provides spacing between the option text and the checkmark.

The result depends on the browser's customizable select implementation and how the option's internal content is represented.

Test the layout in supported browsers before relying on a particular checkmark position.

Related Pseudo-Elements

The ::checkmark pseudo-element is part of a group of CSS features used to customize HTML select controls.

• ::checkmark - Represents the selection indicator associated with a selected option.
• ::picker(select) - Represents the dropdown picker of a customizable select element.
• ::picker-icon - Represents the icon displayed on the select control to indicate that a picker can be opened.

These pseudo-elements target different parts of the select interface.

The ::checkmark pseudo-element should not be confused with the :checked pseudo-class.

The :checked pseudo-class matches selected options and checked form controls, while ::checkmark targets the generated visual indicator associated with an option.

For example:

option:checked {
  background: #e6f0ff;
}
option::checkmark {
  color: #0066cc;
}

The first rule styles the selected option, while the second styles its checkmark.

Limitations

The ::checkmark pseudo-element has several important limitations.

• It is intended for customizable select menus rather than ordinary native select rendering.
• Browser support is more limited than support for traditional HTML select elements.
• Its appearance depends on the browser's implementation of customizable select controls.
• It does not change the selected option's value or form submission behavior.
• It does not replace the :checked pseudo-class.
• It does not target the checkmark of an HTML checkbox.
• Unsupported browsers may ignore the selector and use their native selection indicators.

For example, the following rule should not be used to customize a checkbox:

input[type="checkbox"]::checkmark {
  color: #0066cc;
}

The ::checkmark pseudo-element is not a general checkbox styling selector.

For checkbox customization, use appropriate form control styling techniques such as the accent-color property or carefully implemented custom appearances.

Accessibility Considerations

The ::checkmark pseudo-element changes the visual appearance of a selection indicator without replacing the native HTML select control.

When using customizable select menus, follow these accessibility practices:

• Associate each select element with a visible <label>.
• Maintain sufficient contrast between the checkmark and its background.
• Ensure the selected option remains identifiable without relying entirely on color.
• Preserve visible keyboard focus indicators.
• Use recognizable selection symbols.
• Do not remove the selection indicator without providing another clear indication of the selected option.
• Test keyboard navigation and assistive technology behavior in supported browsers.

The selected value is determined by the HTML select control, not by the appearance of the checkmark.

Changing the symbol with CSS does not change the selected option's semantic state.

Using native HTML controls helps preserve built-in keyboard interaction and form behavior, although newer customizable select implementations should still be tested for accessibility.

Browser Support

The ::checkmark pseudo-element is a newer CSS feature associated with customizable select elements and has limited availability across browsers.

Support depends on the browser implementing customizable select rendering, including features such as appearance: base-select.

Browsers without support generally ignore the ::checkmark styling and display their native select interface.

Because customizable select features are still evolving, test the examples in the specific browser versions used by your audience.

For current compatibility information, visit Can I Use? and search for customizable select elements.

Also consult the browser compatibility information in the MDN reference for ::checkmark.

Specifications

The ::checkmark pseudo-element is defined in the CSS Form Control Styling Level 1 draft.

Customizable select behavior is also described in the WHATWG HTML Living Standard .

These specifications describe the structure and styling capabilities of customizable select controls and their generated interface components.