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

Das ::checkmark CSS Pseudo-Element zielt auf das Häkchen ab, das innerhalb des aktuell ausgewählten <option>-Elements eines anpassbaren Auswahl-Elements platziert ist. Es kann verwendet werden, um eine visuelle Anzeige dafür bereitzustellen, 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 Pseudo-Element zielt auf das Häkchen ab, das innerhalb eines aktuell ausgewählten <option> in einem anpassbaren Auswahl-Element platziert ist.

Es kann nur dann als Ziel verwendet werden, wenn das ursprüngliche Element einen Picker hat und das Erscheinungsbild über die appearance-Eigenschaft auf den Wert base-select gesetzt ist. Seine generierte Box erscheint vor allen Boxen, die vom ::before Pseudo-Element generiert werden. Das Symbol kann mit 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 Häkchens innerhalb der <option>-Elemente anpassen möchten.

Hinweis: Das ::checkmark Pseudo-Element ist nicht im Barrierefreiheitsbaum enthalten, sodass alle generierten Inhalte, die über content darauf gesetzt werden, von unterstützenden Technologien nicht angekündigt werden. Sie sollten trotzdem sicherstellen, dass jedes neue Symbol, das Sie setzen, visuell für seinen beabsichtigten Zweck sinnvoll ist.

Beispiele

Anpassung des Häkchens

Um anpassbare Auswahlfunktionen zu verwenden, müssen sowohl das <select>-Element als auch sein Picker beide einen appearance-Wert von base-select gesetzt haben:

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

Angenommen, Flexbox wird verwendet, um die <option>-Elemente anzuordnen (was bei aktuellen Implementierungen von anpassbaren Auswahl-Elementen der Fall ist), könnten Sie das Häkchen vom Anfang der Zeile an das Ende verschieben, indem Sie einen order-Wert größer als 0 darauf setzen und es mit einem auto-Wert 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 des aktuellen Auswahl-Häkchens für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einer Live-Beispielanzeige.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch