::picker-icon CSS pseudo-element
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Das ::picker-icon CSS Pseudo-Element zielt auf das Auswahl-Symbol innerhalb von Formularsteuerungen, die mit einem Symbol verbunden sind. Im Fall eines anpassbaren Auswahl-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 Formularsteuerungen, also das Symbol, das auf dem Steuerelement-Button angezeigt wird. Es kann nur dann gezielt werden, wenn das ursprüngliche Element einen Picker hat und die Grundeinstellung des Erscheinungsbildes über den appearance-Eigenschaftswert base-select gesetzt ist. Seine generierte Box erscheint nach allen Boxen, die vom ::after Pseudo-Element generiert wurden, mit dem im Standard-Browser-Stylesheet angegebenen 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-End-Seite 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 der Picker geöffnet und geschlossen wird.
Das Auswählen von anpassbaren <select> Picker-Symbolen ist der einzige derzeitige Anwendungsfall für ::picker-icon, aber in Zukunft könnten weitere hinzugefügt werden.
Hinweis:
Das ::picker-icon Pseudo-Element ist nicht im Accessibility-Tree enthalten, daher wird kein generierter content von unterstützenden Technologien angekündigt. Sie sollten dennoch sicherstellen, dass jedes von Ihnen eingestellte neue Symbol visuell für den vorgesehenen Zweck sinnvoll ist.
Beispiele
Das Auswahl-Symbol animieren
Um sich für die Funktionalität eines anpassbaren Auswahl-Elements zu entscheiden, müssen sowohl das <select>-Element als auch sein Picker beide einen appearance-Wert von base-select eingestellt haben:
select,
::picker(select) {
appearance: base-select;
}
Sie könnten dann beispielsweise das ::picker-icon anvisieren und ihm eine benutzerdefinierte color und eine transition verleihen, sodass Ä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 anvisiert, wenn der Picker geöffnet ist, und es wird in einen rotate-Wert von 180deg überführt, wenn das <select> geöffnet wird.
select:open::picker-icon {
rotate: 180deg;
}
Siehe Styling the picker icon für ein vollständiges Beispiel, das diesen Code zusammen mit einer Live-Beispielanzeige verwendet.
Spezifikationen
| Spezifikation |
|---|
| CSS Form Control Styling Level 1 # picker-icon |