::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 innerhalb des derzeit ausgewählten <option>-Elements eines anpassbaren Auswahl-Elements ab. Es kann verwendet werden, um eine visuelle Anzeige dafür zu bieten, 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: white;
}

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

Syntax

css

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

Beschreibung

Das ::checkmark-Pseudoelement zielt auf das Häkchen innerhalb des derzeit ausgewählten <option> eines anpassbaren Auswahl-Elements ab.

Es kann nur dann angesprochen werden, wenn das Ausgangselement einen Picker hat und das Aussehen über die appearance-Eigenschaft mit dem Wert base-select festgelegt wurde. Sein generierter Rahmen erscheint vor allen Rahmen, die durch das ::before-Pseudoelement erzeugt 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 Darstellung des Häkchens innerhalb von <option>-Elementen anpassen möchten.

Hinweis: Das ::checkmark-Pseudoelement ist nicht im Accessibility Tree enthalten, sodass jeglicher generierter content, der darauf gesetzt wird, nicht von unterstützenden Technologien angekündigt wird. Sie sollten dennoch sicherstellen, dass jedes neue von Ihnen gesetzte Symbol 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 anzuordnen (was in den aktuellen Implementierungen von anpassbaren Auswahl-Elementen der Fall ist), könnte das Häkchen vom Anfang der Zeile an das Ende verschoben werden, indem ein order-Wert größer als 0 darauf gesetzt wird und es mit einem auto-Wert bei margin-left am Ende der Zeile ausgerichtet wird (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 Stil des aktuellen Auswahl-Häkchens für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einer Live-Beispieldarstellung.

Spezifikationen

Specification
CSS Form Control Styling Level 1 # checkmark