::picker-icon
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das ::picker-icon CSS Pseudo-Element zielt auf das Auswahl-Symbol in Formularsteuerelementen ab, die ein dazugehöriges Symbol haben. Im Falle eines anpassbaren Select-Elements wählt es das Pfeilsymbol aus, 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 Auswahl-Symbol von Formularsteuerelementen ab, das heißt, das auf der Steuerschaltfläche angezeigte Symbol. Es kann nur angewendet werden, wenn das ursprüngliche Element ein Auswahl-Symbol hat und eine Grundeinstellung über die appearance-Eigenschaft mit dem Wert base-select gesetzt ist. Sein generierter Block erscheint nach allen durch das ::after Pseudo-Element generierten Blöcken, mit dem im Standardbrowserstile spezifizierten Symbol; 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 Select-Elements auszuwählen. Dies ist nützlich, wenn Sie z.B. die Farbe oder Größe des Symbols anpassen, ein anderes Symbol verwenden (unter Verwendung von content oder SVG), oder es animieren möchten, wenn das Auswahlmenü geöffnet und geschlossen wird.
Das Auswählen von anpassbaren <select> Auswahl-Symbolen ist der einzige aktuelle Anwendungsfall für ::picker-icon, aber in Zukunft könnten noch weitere hinzugefügt werden.
Hinweis:
Das ::picker-icon Pseudo-Element ist nicht im Zugänglichkeitsbaum enthalten, daher wird jeder generierte content darauf nicht von unterstützenden Technologien angekündigt. Sie sollten trotzdem sicherstellen, dass das von Ihnen eingestellte neue Symbol visuell sinnvoll für seinen beabsichtigten Zweck ist.
Beispiele
Animation des Auswahl-Symbols
Um die anpassbare Select-Funktionalität zu nutzen, müssen das <select>-Element und sein Auswahl-Symbol beide einen appearance-Wert von base-select gesetzt haben:
select,
::picker(select) {
appearance: base-select;
}
Sie könnten dann beispielsweise das ::picker-icon selektieren und ihm eine benutzerdefinierte color und eine transition geben, sodass Änderungen an seiner rotate-Eigenschaft sanft animiert werden:
select::picker-icon {
color: #999999;
transition: 0.4s rotate;
}
Im nächsten Regelwerk wird ::picker-icon mit der :open Pseudo-Klasse kombiniert — die das Symbol nur dann anvisiert, wenn das Auswahlmenü geöffnet ist — und es wird in einen rotate-Wert von 180deg überführt, wenn das <select> geöffnet ist.
select:open::picker-icon {
rotate: 180deg;
}
Sehen Sie Styling the picker icon für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einer Live-Beispiel-Darstellung.
Spezifikationen
| Specification |
|---|
| CSS Form Control Styling Level 1 # picker-icon |