::checkmark CSS pseudo-element

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 #dddddd;
  background: #eeeeee;
  padding: 10px;
}

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

option {
  border: 2px solid #dddddd;
  background: #eeeeee;
  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: white;
}

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

Syntax

::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.

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:

select,
::picker(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.

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

Browser compatibility

See also

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker(select), ::picker-icon
• :open, :checked
• Customizable select elements