::picker() CSS pseudo-element

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 Drop-Down-Auswahlbereich von anpassbaren Auswahlfeldern.

Beschreibung

Das ::picker() Pseudo-Element zielt auf den Auswahlbereich eines Formularelements ab, also den Popup-Teil, der erscheint, um Ihnen die Auswahl zu ermöglichen, wenn Sie die Steuerungstaste drücken. Es kann nur anvisiert werden, wenn das Ursprungselement einen Auswahlbereich hat und das basis Erscheinungsbild über die appearance Eigenschaft base-select eingestellt hat.

Der ::picker(select) Selektor zielt auf alle Nachkommen des anpassbaren <select> Elements ab, außer das erste <button> Kind; diese Nachkommen werden vom Browser zusammengefasst und als der Auswahlbereich gerendert. Das erste <button> Kind stellt die Steuerungstaste dar, die den Auswahlbereich öffnet, wenn sie gedrückt wird.

Dies ermöglicht es Ihnen, den gesamten Inhalt des Auswahlbereichs als eine Einheit anzusprechen, zum Beispiel, wenn Sie dessen Rahmen anpassen, ihn animieren wollen, wenn er erscheint und verschwindet, oder ihn an einer anderen Stelle als der Standardposition positionieren. Unser Leitfaden für anpassbare Auswahlfelder zeigt viele Beispiele für die Verwendung von ::picker(select).

Verhalten des Auswahldropdowns

Das <select> Element und der Auswahlbereich haben automatisch eine implizite Invoker/Popover-Beziehung, wie sie von der Popover API spezifiziert ist. Siehe Die Verwendung der Popover API für weitere Details zum Popover-Verhalten und Animation des Drop-Down-Auswahlbereichs mit Popover-Zuständen für einen typischen Anwendungsfall, der durch die implizite Popover-Verknüpfung ermöglicht wird.

Positionierung des Auswahlbereichs-Ankers

Ein weiterer Nebeneffekt der oben erwähnten impliziten Invoker/Popover-Beziehung ist, dass das <select> Element und der Auswahlbereich auch einen impliziten Ankerbezug haben, was bedeutet, dass der Auswahlbereich automatisch über CSS Anker-Positionierung mit dem select verbunden ist. Dies hat mehrere Vorteile, insbesondere:

• Die Standardstile des Browsers positionieren den Auswahlbereich relativ zur Schaltfläche (dem Anker) und Sie können diese Position anpassen, wie im Positionieren von Elementen relativ zu ihrem Anker erklärt. Zu Referenzzwecken 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 Auswahlbereich neu positionieren, wenn er Gefahr läuft, den Viewport zu überlaufen. Fallback-Positionen sind im Anleitung: Optionen und bedingtes Verbergen bei Überlauf Leitfaden erklärt. Zu Referenzzwecken 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 Nutzung eines benutzerdefinierten Auswahlfelds

Um die benutzerdefinierte Auswahlfunktionalität und minimalen Standardstile des Browsers zu nutzen (und die vom Betriebssystem bereitgestellten Stile zu entfernen), müssen das <select> Element und sein Auswahlbereich 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 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 Auswahlfelder