::picker-icon
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.
Der ::picker-icon CSS Pseudo-Element zielt auf das Auswahl-Symbol innerhalb von Formularelementen, die ein solches Symbol besitzen. Im Fall eines anpassbaren Auswahl-Elements selektiert es das Pfeilsymbol, das im <select> Element angezeigt wird und nach unten zeigt, wenn es geschlossen ist.
Syntax
::picker-icon {
/* ... */
}
Beschreibung
Das ::picker-icon Pseudo-Element zielt auf das Auswahl-Symbol von Formularelementen ab, also das Symbol, das auf der Steuerungsschaltfläche angezeigt wird. Es kann nur gezielt werden, wenn das auslösende Element ein Auswahlfeld hat und das Basis-Aussehen über den appearance Property-Wert base-select festgelegt ist. Die erzeugte Box erscheint nach allen Boxen, die durch das ::after Pseudo-Element erzeugt werden, mit dem Symbol, das im Standard-Browser-Stylesheet angegeben ist; es kann mit der content Eigenschaft angepasst werden.
Der ::picker-icon Selektor kann verwendet werden, um den nach unten gerichteten Pfeil auf der Inline-Endseite eines anpassbaren Auswahl-Elements auszuwählen. Dies ist beispielsweise nützlich, wenn Sie die Farbe oder Größe des Symbols anpassen, ein anderes Symbol verwenden (mit content oder SVG) oder es animieren möchten, wenn die Auswahl geöffnet und geschlossen wird.
Die Auswahl von anpassbaren <select> Auswahl-Symbolen ist der einzige aktuelle Anwendungsfall für ::picker-icon, aber in Zukunft könnten weitere hinzugefügt werden.
Hinweis:
Das ::picker-icon Pseudo-Element ist nicht im Zugänglichkeitsbaum enthalten, sodass jeglicher generierter content, der darauf gesetzt wird, nicht von unterstützenden Technologien angesagt wird. Sie sollten dennoch sicherstellen, dass jedes neue Symbol, das Sie festlegen, visuell sinnvoll für den beabsichtigten Zweck ist.
Beispiele
Animation des Auswahl-Symbols
Um sich für anpassbare Auswahl-Funktionalität zu entscheiden, müssen sowohl das <select> Element als auch dessen Auswahl ein appearance Wert von base-select eingestellt haben:
select,
::picker(select) {
appearance: base-select;
}
Sie könnten dann zum Beispiel das ::picker-icon anvisieren und ihm eine benutzerdefinierte color und eine transition geben, sodass Änderungen an seiner rotate Eigenschaft weich animiert werden:
select::picker-icon {
color: #999999;
transition: 0.4s rotate;
}
In der nächsten Regel wird ::picker-icon mit der :open Pseudo-Klasse kombiniert — die das Symbol nur anvisiert, wenn das Auswahlfeld offen ist — und es wird zu einem rotate Wert von 180deg überführt, wenn das <select> geöffnet wird.
select:open::picker-icon {
rotate: 180deg;
}
Sehen Sie Styling the picker icon für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einem Live-Beispiel.
Spezifikationen
| Specification |
|---|
| CSS Form Control Styling Level 1 # picker-icon |
Browser-Kompatibilität
Loading…