::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 Pseudoelement zielt auf den Auswahldialog eines Elements ab, zum Beispiel den Dropdown-Auswahldialog eines anpassbaren Auswahl-Elements.
Syntax
::picker(<ident>) {
/* ... */
}
Parameter
Beschreibung
Das Pseudoelement ::picker()
zielt auf den Auswahldialog eines Formularsteuerelements, das heißt den Popup-Teil, der erscheint, um Ihnen eine Auswahl zu ermöglichen, wenn Sie den Steuerelement-Button drücken. Es kann nur dann angesteuert werden, wenn das ursprüngliche Element einen Auswahldialog besitzt und das grundlegende Erscheinungsbild über den base-select
-Wert der appearance
-Eigenschaft gesetzt ist.
Der ::picker(select)
-Selektor zielt auf alle Nachkommen des anpassbaren <select>
-Elements ab, mit Ausnahme des ersten <button>
-Kindes; diese Nachkommen werden vom Browser gruppiert und als Auswahldialog gerendert. Das erste <button>
-Kind repräsentiert den Steuerelement-Button, der den Auswahldialog öffnet, wenn er gedrückt wird.
Dies ermöglicht es Ihnen, alle Inhalte des Auswahldialogs als eine Einheit anzusprechen, z.B. wenn Sie seinen Rahmen anpassen, ihn beim Erscheinen und Verschwinden animieren oder ihn an einer anderen Position als der Standardposition platzieren möchten. Unser Leitfaden zu anpassbaren Auswahl-Elementen zeigt viele Beispiele für die Verwendung von ::picker(select)
.
Verhalten des Auswahldialog-Popovers
Das <select>
-Element und der Auswahldialog haben automatisch eine implizite Invoker/Popover-Beziehung zugewiesen, wie vom Popover-API festgelegt. Siehe Verwendung des Popover-APIs für weitere Details zum Popover-Verhalten, und siehe Animieren des Auswahldialog-Dropdowns mithilfe von Popover-Zuständen für einen typischen Anwendungsfall, der durch die implizite Popover-Verknüpfung ermöglicht wird.
Positionierung des Auswahldialog-Ankers
Ein weiterer Nebeneffekt der oben erwähnten impliziten Invoker/Popover-Beziehung ist, dass das <select>
-Element und der Auswahldialog auch einen impliziten Ankerbezug haben, was bedeutet, dass der Auswahldialog automatisch über die CSS-Anker-Positionierung mit der Auswahl verknüpft ist. Dies hat mehrere Vorteile, vor allem:
-
Die Standardstile des Browsers positionieren den Auswahldialog relativ zum Button (dem Anker) und Sie können diese Position anpassen, wie im Abschnitt Positionierung von Elementen relativ zu ihrem Anker erklärt. Zur Referenz sind die zugehörigen 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 Fallback-Positionen, die den Auswahldialog umpositionieren, wenn er Gefahr läuft, den Viewport zu überlaufen. Fallback-Positionen werden im Leitfaden zu Fallback-Optionen und bedingtem Verbergen bei Überlauf erklärt. Zur Referenz sind die zugehörigen 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 eines benutzerdefinierten Auswahl-Elements
Um sich für die Funktionalität des benutzerdefinierten Auswahl-Elements und die minimalen Basisstile des Browsers zu entscheiden (und die vom Betriebssystem bereitgestellten Stile zu entfernen), müssen das <select>
-Element und sein Auswahldialog beide einen appearance
-Wert von base-select
gesetzt haben:
select,
::picker(select) {
appearance: base-select;
}
Sie könnten dann zum Beispiel den Standard-schwarzen border
des Auswahldialogs entfernen:
::picker(select) {
border: none;
}
Spezifikationen
Specification |
---|
CSS Form Control Styling Level 1 # picker-pseudo |