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

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

Parameter

<ident>

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

select

Der Dropdown-Auswahldialog von anpassbaren Auswahl-Elementen.

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:

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

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

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

Sie könnten dann zum Beispiel den Standard-schwarzen border des Auswahldialogs entfernen:

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

Spezifikationen

Specification
CSS Form Control Styling Level 1
# picker-pseudo

Browser-Kompatibilität

Siehe auch