::picker()

Syntax

::picker(<ident>) { /* ... */ } 

Parameter

<ident>

Ein String, der das Element repräsentiert, dessen Auswahlbereich Sie anvisieren möchten. Die folgenden Werte sind verfügbar:

select

Der Dropdown-Auswahlbereich von anpassbaren Auswahl-Elementen.

Beschreibung

Das ::picker() Pseudo-Element zielt auf den Auswahlteil eines Formularelements ab, also den Popup-Teil, der erscheint, um Ihnen eine Auswahl zu ermöglichen, wenn Sie die Steuertaste drücken. Er ist nur dann anvisierbar, wenn das Ursprungelement einen Auswahlbereich hat und das Grunderscheinungsbild über den base-select Wert der appearance Eigenschaft darauf eingestellt ist.

Der ::picker(select) Selektor zielt auf alle Nachkommen eines anpassbaren <select> Elements ab, mit Ausnahme des ersten <button> Kindes; diese Nachkommen werden vom Browser gruppiert und als Auswahlbereich gerendert. Das erste <button> Kind repräsentiert die Steuertaste, die den Auswahlbereich öffnet, wenn sie gedrückt wird.

Dies ermöglicht es Ihnen, alle Inhalte des Auswahlbereichs als eine einzelne Einheit anzusprechen, zum Beispiel, wenn Sie seinen Rahmen anpassen, ihn animieren, wenn er erscheint und verschwindet, oder ihn an einer anderen Stelle als der Standardposition positionieren möchten. Unser Leitfaden zu anpassbaren Auswahl-Elementen zeigt viele Beispiele zur Verwendung von ::picker(select).

Verhalten des Auswahl-Popovers

Das <select> Element und der Auswahlbereich haben automatisch eine implizite Invoker/Popover-Beziehung, wie sie durch die Popover API spezifiziert wird. Weitere Details zum Popover-Verhalten finden Sie unter Verwendung der Popover API, und für einen typischen Anwendungsfall, den die implizite Popover-Zuordnung ermöglicht, siehe Animation des Dropdown-Auswahlbereichs mittels Popover-Zuständen.

Positionierung des Auswahlankers

Ein weiterer Nebeneffekt der oben erwähnten impliziten Invoker/Popover-Beziehung ist, dass das <select> Element und der Auswahlbereich auch eine implizite Ankerreferenz haben, was bedeutet, dass der Auswahlbereich automatisch über die CSS-Ankerpositionierung mit dem select assoziiert ist. Dies bietet mehrere Vorteile, insbesondere:

• Die Standardstile des Browsers positionieren den Auswahlbereich relativ zur Taste (dem Anker) und Sie können diese Position anpassen, wie in Positionierung von Elementen relativ zu ihrem Anker erläutert. Zur Bezugnahme sind die zugehörigen Standardstile wie folgt:

  css

  inset: auto; margin: 0; min-inline-size: anchor-size(self-inline); min-block-size: 1lh; /* Go to the edge of the viewport, and add scrollbars if needed. */ max-block-size: stretch; overflow: auto; /* Below and span-right, by default. */ position-area: block-end span-inline-end; 

• Die Standardstile des Browsers definieren auch einige Position-versuchen-Alternativen, die den Auswahlbereich neu positionieren, falls er Gefahr läuft, den Viewport zu überschreiten. Position-versuchen-Alternativen werden im Leitfaden zu Alternativen für Überlauf und bedingtes Verbergen erklärt. Zur Bezugnahme sind die zugehörigen Standard-Fallback-Stile wie folgt:

  css

  position-try-order: most-block-size; position-try-fallbacks: /* First try above and span-right, */ /* then below but span-left, */ /* then above and span-left. */ block-start span-inline-end, block-end span-inline-start, block-start span-inline-start; 

Beispiele

Grundlegende Verwendung von benutzerdefinierten Auswahlelementen

Um sich für die Funktionalität benutzerdefinierter Auswahl und minimale Standardstile des Browsers zu entscheiden (und das von den Betriebssystemen bereitgestellte Styling zu entfernen), müssen sowohl das <select> Element als auch sein Auswahlbereich einen appearance Wert von base-select aufweisen:

select, ::picker(select) { appearance: base-select; } 

Sie könnten dann zum Beispiel die Standard-Schwarz border des Auswahlbereichs entfernen:

::picker(select) { border: none; } 

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker-icon, ::checkmark
• :open, :checked
• Anpassbare Auswahl-Elemente