::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 Auswahlsymbol in Formularelementen, die ein damit verbundenes Symbol haben. Im Fall eines anpassbaren Auswahl-Elements wird das Pfeilsymbol ausgewählt, das auf dem <select> Element angezeigt wird und nach unten zeigt, wenn es geschlossen ist.
Syntax
::picker-icon {
/* ... */
}
Beschreibung
Das ::picker-icon Pseudo-Element zielt auf das Auswahlsymbol von Formularelementen ab, also das Symbol, das auf der Schaltfläche des Elements angezeigt wird. Es kann nur dann gezielt werden, wenn das ursprungliche Element ein Auswahlwerkzeug hat und wenn die Grundeinstellung über die Eigenschaft appearance auf base-select gesetzt wurde. Die erzeugte Box erscheint nach allen durch das ::after Pseudo-Element erzeugten Boxen, wobei das Symbol im Standard-Browser-Stylesheet angegeben ist; Sie können es mit der content Eigenschaft anpassen.
Der ::picker-icon Selektor kann verwendet werden, um den nach unten zeigenden Pfeil auf der Inline-Endseite eines anpassbaren Auswahl-Elements auszuwählen. Dies ist nützlich, wenn Sie beispielsweise die Farbe oder Größe des Symbols anpassen, ein anderes Symbol verwenden (mit content oder SVG), oder es animieren möchten, wenn das Auswahlwerkzeug geöffnet und geschlossen wird.
Das Auswählen von anpassbaren <select> Auswahlsymbolen ist der einzige aktuelle Anwendungsfall für ::picker-icon, es können jedoch in Zukunft weitere hinzugefügt werden.
Hinweis:
Das ::picker-icon Pseudo-Element ist nicht im Accessibility-Tree enthalten, so dass jeglicher auf ihm gesetzter erzeugter content von unterstützenden Technologien nicht angekündigt wird. Sie sollten dennoch sicherstellen, dass jedes neue Symbol, das Sie setzen, visuell sinnvoll für seinen beabsichtigten Zweck ist.
Beispiele
Animation des Auswahlsymbols
Um die anpassbare Auswahl-Funktionalität zu aktivieren, müssen das <select> Element und sein Auswahlwerkzeug beide einen appearance Wert von base-select gesetzt haben:
select,
::picker(select) {
appearance: base-select;
}
Sie könnten dann z. B. das ::picker-icon anvisieren und ihm eine benutzerdefinierte color und eine transition geben, damit Änderungen an seiner rotate Eigenschaft sanft 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 dann anvisiert, wenn das Auswahlwerkzeug geöffnet ist - und es wird beim Öffnen des <select> auf einen rotate Wert von 180deg geändert.
select:open::picker-icon {
rotate: 180deg;
}
Sehen Sie sich Styling the picker icon 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 # picker-icon |
Browser-Kompatibilität
Loading…