::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 derzeit ausgewählten <option>-Elements eines anpassbaren Select-Elements platziert wird. Es kann verwendet werden, um visuell anzuzeigen, welcher Eintrag 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 Pseudo-Element zielt auf das Häkchen ab, das innerhalb eines anpassbaren Select-Elements im derzeit ausgewählten <option> platziert wird.
Es ist nur ansteuerbar, wenn das Ursprungs-Element einen Auswahlmechanismus hat und das basale Erscheinungsbild darauf über die appearance-Eigenschaft mit dem Wert base-select gesetzt ist. Die generierte Box erscheint vor allen Boxen, die vom ::before Pseudo-Element 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 Position des Häkchens im <option>-Element anpassen möchten.
Hinweis:
Das ::checkmark Pseudo-Element ist nicht im Accessibility-Tree enthalten, daher wird jeder auf ihm gesetzte, generierte content-Inhalt von unterstützenden Technologien nicht angekündigt. Sie sollten dennoch sicherstellen, dass jedes von Ihnen gesetzte neue Icon visuell sinnvoll für seinen beabsichtigten Zweck ist.
Beispiele
Anpassung des Häkchens
Um die Funktionalität eines anpassbaren Select-Elements zu verwenden, müssen sowohl das <select>-Element als auch dessen Auswahlmechanismus einen appearance-Wert von base-select gesetzt haben:
select,
::picker(select) {
appearance: base-select;
}
Angenommen, Flexbox wird verwendet, um die <option>-Elemente anzuordnen (was in den aktuellen Implementierungen von anpassbaren Selects der Fall ist), können Sie dann das Häkchen vom Anfang der Zeile zum 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: "☑️";
}
Sehen Sie sich Styling the current selection checkmark für ein vollständiges Beispiel an, das diesen Code verwendet, zusammen mit einer Live-Beispieldarstellung.
Spezifikationen
| Specification |
|---|
| CSS Form Control Styling Level 1 # checkmark |