`::checkmark` CSS-псевдоэлемент

::checkmark CSS-псевдоэлемент выбирает галочку, размещённую внутри текущего выбранного элемента <option> элемента настраиваемого списка выбора. Его можно использовать для визуального обозначения выбранного пункта.

Попробуйте

<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;
}

Синтаксис

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

Описание

Псевдоэлемент ::checkmark выбирает галочку, размещённую внутри текущего выбранного <option> настраиваемого списка выбора.

Его можно выбрать, только если у исходного элемента есть средство выбора и для него задан базовый внешний вид с помощью свойства appearance со значением base-select. Созданный им блок отображается перед блоками, созданными псевдоэлементом ::before. Значок можно настроить с помощью свойства content.

Селектор ::checkmark полезен, например, если нужно скрыть галочку, использовать собственный значок или изменить положение галочки внутри элементов <option>.

Примеры

Настройка галочки

Чтобы включить функциональность настраиваемого списка выбора, для элемента <select> и его средства выбора необходимо задать значение свойства appearance base-select:

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

Предположим, что для размещения элементов <option> используется flexbox (так реализовано в текущих реализациях настраиваемых списков выбора). Тогда можно переместить галочку из начала строки в конец, задав для неё значение свойства order большее, чем 0, и выровняв её по концу строки с помощью значения auto свойства margin-left (см. раздел Выравнивание и автоматические поля).

Значение свойства content также можно изменить на другой эмодзи, чтобы заменить отображаемый значок.

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

Полный пример кода и его отображение в действии см. в разделе Настройка галочки текущего выбора.

Спецификации

Совместимость с браузерами

См. также

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker(select), ::picker-icon
• :open, :checked
• Настраиваемые списки выбора