::checkmark

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::checkmark CSS pseudo-element targets the checkmark placed inside the currently-selected <option> element of a customizable select element. It can be used to provide a visual indication of which option is selected.

Try it

<label for="pet-select">
  Select pet:
</label>
<br />
<select id="pet-select">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="chicken">
    Chicken
  </option>
</select>

option::checkmark {
  color: orange;
  font-size: 1.5rem;
}

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

select {
  border: 2px solid #ddd;
  background: #eee;
  padding: 10px;
}

::picker(select) {
  border: none;
}

option {
  border: 2px solid #ddd;
  background: #eee;
  padding: 10px;
}

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:nth-of-type(odd) {
  background: #fff;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

Syntax

css
::checkmark {
  /* ... */
}

Description

The ::checkmark pseudo-element targets the checkmark placed inside a customizable select element's currently-selected <option>.

It is only available to target when the originating element has a picker and has base appearance set on it via the appearance property base-select value. Its generated box appears before any boxes generated by the ::before pseudo-element. The icon can be customized using the content property.

The ::checkmark selector is useful for example if you want to hide the checkmark, use a custom icon, or adjust the checkmark's rendering position inside <option> elements.

Note: The ::checkmark pseudo-element is not included in the accessibility tree, so any generated content set on it will not be announced by assistive technologies. You should still make sure that any new icon you set visually makes sense for its intended purpose.

Examples

Customizing the checkmark

To opt-in to customizable select functionality, the <select> element and its picker both need to have an appearance value of base-select set on them:

css
select,
::checkmark(select) {
  appearance: base-select;
}

Assuming flexbox is being used to lay out the <option> elements (which is true in current implementations of customizable selects), you could then move the checkmark from the start of the row to the end by setting an order value on it greater than 0, and aligning it to the end of the row using an auto margin-left value (see Alignment and auto margins).

The value of the content property could also be set to a different emoji to change the displayed icon.

css
option::checkmark {
  order: 1;
  margin-left: auto;
  content: "☑️";
}

See Styling the current selection checkmark for a full example that uses this code, along with a live example rendering.

Specifications

Specification
CSS Form Control Styling Level 1
# styling-checkmarks-the-checkmark-pseudo-element

Browser compatibility

See also