::picker()
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()
CSS Pseudo-Element zielt auf den Auswahlbereich eines Elements ab, zum Beispiel den Auswahl-Dialog eines anpassbaren Auswahlfelds.
Syntax
::picker(<ident>) {
/* ... */
}
Parameter
Beschreibung
Das ::picker()
Pseudo-Element zielt auf den Auswahlbereich eines Formularelements ab, das heißt, den eingeblendeten Teil, der erscheint, um eine Auswahl zu ermöglichen, wenn Sie die Steuertaste drücken. Es ist nur anvisierbar, wenn das ursprüngliche Element einen Auswahlbereich hat und das Basisaussehen auf ihm mithilfe der appearance
Eigenschaft mit dem Wert base-select
gesetzt wurde.
Der ::picker(select)
Selektor zielt auf alle Nachkommen eines anpassbaren <select>
Elements ab, außer auf das erste <button>
Kind; diese Nachkommen werden vom Browser zusammengefasst und als Auswahlbereich dargestellt. 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 einzige Einheit anzusprechen, zum Beispiel, wenn Sie seinen Rahmen anpassen, ihn animieren möchten, wenn er erscheint und verschwindet, oder ihn an einer anderen Stelle als der Standardposition positionieren möchten. Unser Leitfaden zu anpassbaren Auswahlfeldern zeigt viele Beispiele für die Verwendung von ::picker(select)
.
Verhalten des Auswahlbereich-Popovers
Das <select>
Element und der Auswahlbereich haben eine implizite Anweisung-/Popover-Beziehung, die ihnen automatisch zugewiesen wird, wie sie von der Popover API festgelegt wurde. Weitere Details zum Popover-Verhalten finden Sie unter Verwendung der Popover API und sehen Sie sich Animation der Auswahl des Drop-Downs mittels Popover-Zustände für einen typischen Anwendungsfall an, der durch die implizite Popover-Verknüpfung ermöglicht wird.
Positionierung der Auswahlbereichs-Anker
Eine weitere Nebenwirkung der oben genannten impliziten Anweisung-/Popover-Beziehung ist, dass das <select>
Element und der Auswahlbereich auch eine implizite Anker-Referenz haben, was bedeutet, dass der Auswahlbereich automatisch mit dem Auswahlfeld über CSS Ankerpositionierung assoziiert ist. Dies hat mehrere Vorteile, vor allem:
-
Die Standardstile des Browsers positionieren den Auswahlbereich relativ zur Taste (dem Anker) und Sie können diese Position anpassen, wie in Positionieren von Elementen relativ zu ihrem Anker erklärt. Zur Referenz sind die verbundenen Standardstile wie folgt:
cssinset: 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-Try-Alternativen, die den Auswahlbereich neu positionieren, falls er droht, das Sichtfeld zu überlaufen. Position-Try-Alternativen werden im Leitfaden zu Fallback-Optionen und bedingtem Verbergen für Überlauf erklärt. Zur Referenz sind die verbundenen Standard-Fallback-Stile wie folgt:
cssposition-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 des benutzerdefinierten Auswahlfelds
Um die Funktionalität des benutzerdefinierten Auswahlfelds und die minimalen Basisstile des Browsers zu nutzen (und die vom Betriebssystem bereitgestellte Gestaltung zu entfernen), müssen sowohl das <select>
Element als auch dessen Auswahlbereich einen appearance
Wert von base-select
haben:
select,
::picker(select) {
appearance: base-select;
}
Sie könnten dann zum Beispiel die standardmäßige schwarze border
des Auswahlbereichs entfernen:
::picker(select) {
border: none;
}
Spezifikationen
Specification |
---|
CSS Form Control Styling Level 1 # the-picker-pseudo-element |