::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.

Das ::picker-icon CSS Pseudo-Element zielt auf das Picker-Symbol innerhalb von Formularelementen, die ein Symbol aufweisen. Im Fall eines anpassbaren Auswahl-Elements wird das Pfeilsymbol, das auf dem <select>-Element angezeigt wird und bei geschlossenem Zustand nach unten zeigt, ausgewählt.

Syntax

css
::picker-icon {
  /* ... */
}

Beschreibung

Das ::picker-icon Pseudo-Element zielt auf das Picker-Symbol von Formularelementen, also das Symbol, das auf der Schaltfläche des Elements angezeigt wird. Es kann nur dann gezielt werden, wenn das ursprüngliche Element einen Picker hat und sein Basis-Erscheinungsbild über die appearance-Eigenschaft mit dem Wert base-select festgelegt wurde. Sein generierter Kasten erscheint nach allen Kästen, die durch das ::after Pseudo-Element erzeugt werden, 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 gerichteten Pfeil auf der inline-end Seite eines anpassbaren Auswahl-Elements zu selektieren. Dies ist nützlich, wenn Sie zum Beispiel die Farbe oder Größe des Symbols anpassen, ein anderes Symbol (mit content oder SVG) verwenden oder es animieren möchten, wenn der Picker geöffnet und geschlossen wird.

Das Selektieren von anpassbaren <select> Picker-Symbolen ist der einzige aktuelle Anwendungsfall für ::picker-icon, aber in der 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 angekündigt wird. Sie sollten dennoch sicherstellen, dass jedes neue Symbol, das Sie setzen, visuell für den vorgesehenen Zweck sinnvoll ist.

Beispiele

Das Picker-Symbol animieren

Um sich für die Funktionalität anpassbarer Auswahl zu entscheiden, müssen das <select>-Element und sein Picker beide einen appearance-Wert von base-select aufweisen:

css
select,
::picker-icon(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 sanft animiert werden:

css
select::picker-icon {
  color: #999;
  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 der Picker geöffnet ist — und zu einem rotate-Wert von 180deg animiert, wenn das <select> geöffnet wird.

css
select:open::picker-icon {
  rotate: 180deg;
}

Siehe Styling the picker icon für ein vollständiges Beispiel, das diesen Code verwendet, zusammen mit einem Live-Beispiel der Darstellung.

Spezifikationen

Specification
CSS Form Control Styling Level 1
# picker-opener-icon-the-picker-icon-pseudo-element

Browser-Kompatibilität

Siehe auch