::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 Pseudoelement 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 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 #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;
}

Syntax

css

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

Beschreibung

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

Es kann nur gezielt werden, wenn das Ausgangselement einen Picker hat und mit dem base-select-Wert der appearance-Eigenschaft versehen ist. Sein generiertes Box erscheint vor allen von dem ::before Pseudoelement generierten Boxen. Das Icon kann mit der content-Eigenschaft angepasst werden.

Der ::checkmark-Selektor ist nützlich, wenn Sie z. B. das Häkchen verbergen, ein benutzerdefiniertes Symbol verwenden oder die Darstellungsposition des Häkchens innerhalb von <option>-Elementen anpassen möchten.

Hinweis: Das ::checkmark Pseudoelement ist nicht im Barrierefreiheitsbaum enthalten, sodass alle auf ihm gesetzten generierten content-Inhalte nicht von unterstützenden Technologien angekündigt werden. Sie sollten dennoch sicherstellen, dass jedes neue von Ihnen gesetzte Icon visuell für seinen beabsichtigten Zweck sinnvoll ist.

Beispiele

Anpassung des Häkchens

Um die anpassbare Auswahlfunktionalität 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 bei aktuellen Implementierungen von anpassbaren Auswahlen der Fall ist), könnten Sie das Häkchen dann vom Anfang der Zeile an das Ende verschieben, indem Sie einen order-Wert darauf größer als 0 setzen und es mit einem auto margin-left-Wert an das 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: "☑️";
}

Sehen Sie sich Styling des derzeit ausgewählten Häkchens für ein vollständiges Beispiel an, das diesen Code verwendet, zusammen mit einem Live-Beispiel-Rendering.

Spezifikationen

Specification
CSS Form Control Styling Level 1 # checkmark