::checkmark CSS pseudo-element
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
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 Indikation 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 #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 innerhalb eines anpassbaren Auswahl-Elements im aktuell ausgewählten <option> platziert ist.
Es kann nur gezielt verwendet werden, wenn das ursprüngliche Element einen Picker hat und das grundlegende Erscheinungsbild über die appearance-Eigenschaft mit dem Wert base-select darauf gesetzt ist. Die generierte Box erscheint vor allen Boxen, die vom ::before-Pseudoelement generiert werden. Das Icon kann mit der content-Eigenschaft angepasst werden.
Der ::checkmark-Selektor ist nützlich, z.B. wenn Sie das Häkchen ausblenden, ein benutzerdefiniertes Icon verwenden oder die Position der Häkchen-Darstellung innerhalb von <option>-Elementen anpassen möchten.
Hinweis:
Das ::checkmark Pseudoelement ist nicht im Barrierefreiheitsbaum enthalten, sodass jeglicher darauf gesetzter generierter content nicht von unterstützenden Technologien angekündigt wird. Sie sollten dennoch sicherstellen, dass jegliches neue Icon, das Sie setzen, visuell für den beabsichtigten Zweck sinnvoll ist.
Beispiele
Anpassung des Häkchens
Um die anpassbare Auswahlfunktionalität zu nutzen, müssen das <select>-Element und sein Picker beide einen appearance-Wert von base-select darauf gesetzt haben:
select,
::picker(select) {
appearance: base-select;
}
Angenommen, es wird Flexbox verwendet, um die <option>-Elemente zu layouten (was in aktuellen Implementierungen von anpassbaren Auswahlen der Fall ist), könnten Sie dann das Häkchen vom Beginn 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 am 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.
option::checkmark {
order: 1;
margin-left: auto;
content: "☑️";
}
Sehen Sie Styling the current selection checkmark für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einem Live-Beispiel der Darstellung.
Spezifikationen
| Spezifikation |
|---|
| CSS Form Control Styling Level 1 # checkmark |