::checkmark

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Der ::checkmark CSS Pseudoelement zielt auf das Häkchen ab, das im aktuell ausgewählten <option> Element eines anpassbaren Auswahl-Elements platziert ist. Es kann verwendet werden, um eine visuelle Anzeige darüber zu geben, welche Option ausgewählt ist.

Probieren Sie es aus

<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 {
  /* ... */
}

Beschreibung

Das ::checkmark Pseudoelement zielt auf das Häkchen ab, das im aktuell ausgewählten <option> eines anpassbaren Auswahl-Elements platziert ist.

Es kann nur dann gezielt werden, wenn das ursprungsgebende Element über einen Picker verfügt und das Basisaussehen über den Wert base-select der appearance-Eigenschaft gesetzt wurde. Sein generierter Kasten erscheint vor allen Kästen, die vom ::before Pseudoelement generiert werden. Das Symbol kann mithilfe der content-Eigenschaft angepasst werden.

Der ::checkmark-Selektor ist nützlich, wenn Sie beispielsweise das Häkchen ausblenden, ein benutzerdefiniertes Symbol verwenden oder die Position des gerenderten Häkchens innerhalb der <option>-Elemente anpassen möchten.

Hinweis: Das ::checkmark Pseudoelement ist nicht im Barrierefreiheitsbaum enthalten, sodass jeglicher generierter content, der darauf gesetzt wird, von unterstützenden Technologien nicht angesagt wird. Sie sollten dennoch sicherstellen, dass jedes neue Symbol, das Sie setzen, visuell für den beabsichtigten Zweck sinnvoll ist.

Beispiele

Anpassung des Häkchens

Um die Funktionalität eines anpassbaren Auswahl-Elements zu aktivieren, müssen sowohl das <select>-Element als auch sein Picker einen appearance-Wert von base-select gesetzt haben:

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

Angenommen, flexbox wird verwendet, um die <option>-Elemente zu layouten (was in aktuellen Implementierungen von anpassbaren Auswahlen der Fall ist), dann könnten Sie das Häkchen vom Anfang der Zeile an das Ende verschieben, indem Sie einen order-Wert darauf setzen, der größer als 0 ist, und es mithilfe eines auto-Werts von margin-left am Ende der Zeile ausrichten (siehe Ausrichtung und automatische Ränder).

Der Wert der content-Eigenschaft könnte auch auf ein anderes Emoji gesetzt werden, um das angezeigte Symbol zu ändern.

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

Siehe Styling the current selection checkmark für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einem Live-Beispielrendering.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch