::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 visuell anzuzeigen, 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 in einem anpassbaren Auswahl-Element innerhalb des aktuell ausgewählten <option> platziert ist.

Es kann nur dann gezielt werden, wenn das ursprüngliche Element über einen Picker verfügt und das Basispersönlichkeits-Aussehen über den Wert base-select der appearance-Eigenschaft darauf festgelegt ist. Sein generierter Kasten erscheint vor allen Kästchen, die vom ::before Pseudo-Element generiert werden. Das Icon kann mit der content-Eigenschaft angepasst werden.

Der ::checkmark Selector ist nützlich, wenn Sie beispielsweise das Häkchen ausblenden, ein benutzerdefiniertes Icon verwenden oder die Positionierung des Häkchens im <option> Element anpassen möchten.

Hinweis: Das ::checkmark Pseudo-Element ist nicht im Zugänglichkeitsbaum enthalten, sodass generierter content, der darauf gesetzt wird, von unterstützenden Technologien nicht angekündigt wird. Sie sollten dennoch sicherstellen, dass jedes neue Icon, das Sie einstellen, visuell für den beabsichtigten Zweck sinnvoll ist.

Beispiele

Anpassen des Häkchens

Um die anpassbare Auswahlfunktion zu aktivieren, müssen das <select> Element und dessen Picker beide einen appearance-Wert von base-select gesetzt haben:

css

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

Vorausgesetzt, dass Flexbox verwendet wird, um die <option> Elemente anzuordnen (was in aktuellen Implementierungen von anpassbaren Auswahlen der Fall ist), könnten Sie dann das Häkchen vom Anfang der Zeile zum Ende verschieben, indem Sie einen order Wert darauf setzen, der größer als 0 ist, und es mit einem auto margin-left-Wert ans Ende der Zeile ausrichten (siehe Alignment and auto margins).

Der Wert der content-Eigenschaft könnte auch auf ein anderes Emoji gesetzt werden, um das angezeigte Icon 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-Beispiel zur Darstellung.

Spezifikationen

Specification
CSS Form Control Styling Level 1 # checkmark