::checkmark CSS pseudo-element
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
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 in dem aktuell ausgewählten <option>-Element eines anpassbaren Auswahl-Elements platziert ist. Es kann verwendet werden, um einen visuellen Hinweis darauf 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
::checkmark {
/* ... */
}
Beschreibung
Das ::checkmark-Pseudoelement zielt auf das Häkchen ab, das in dem aktuell ausgewählten <option> eines anpassbaren Auswahl-Elements platziert ist.
Es kann nur dann angesprochen werden, wenn das ursprüngliche Element einen Picker hat und das Basis-Erscheinungsbild über den appearance-Eigenschaftswert base-select darauf gesetzt wurde. Sein generierter Kasten erscheint vor allen Kästen, die durch das ::before-Pseudoelement generiert werden. Das Icon kann mit der content-Eigenschaft angepasst werden.
Der ::checkmark-Selektor ist zum Beispiel nützlich, wenn Sie das Häkchen ausblenden, ein benutzerdefiniertes Icon verwenden oder die Positionierung des Häkchens in den <option>-Elementen anpassen möchten.
Hinweis:
Das ::checkmark-Pseudoelement ist nicht in der Zugänglichkeitshierarchie enthalten, sodass generierter content, der darauf gesetzt wird, von unterstützenden Technologien nicht angekündigt wird. Sie sollten dennoch sicherstellen, dass das neu gesetzte Icon für seinen beabsichtigten Zweck visuell 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 darauf gesetzt haben:
select,
::picker(select) {
appearance: base-select;
}
Angenommen, Flexbox wird verwendet, um die <option>-Elemente anzuordnen (was bei aktuellen Implementierungen anpassbarer Auswahl-Objekte 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 für 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 Icon zu ändern.
option::checkmark {
order: 1;
margin-left: auto;
content: "☑️";
}
Siehe Styling des aktuellen Auswahlsymbols für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einer Live-Demo.
Spezifikationen
| Spezifikation |
|---|
| CSS Form Control Styling Level 1 # checkmark |