::picker()

<ident>

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

select

Der Dropdown-Picker von anpassbaren Select-Elementen.

Das ::picker() Pseudoelement zielt auf den Picker-Teil eines Formularelements ab, das heißt, den Popup-Teil, der erscheint, um Ihnen eine Auswahl zu ermöglichen, wenn Sie die Steuertaste drücken. Es kann nur verwendet werden, wenn das Ursprungs-Element einen Picker hat und die Grundeinstellung über die Eigenschaft appearance mit dem Wert base-select versehen ist.

Der ::picker(select) Selektor zielt auf alle Nachkommen eines anpassbaren <select> Elements ab, außer dem ersten <button> Kind; diese Nachkommen werden vom Browser gruppiert und als Picker dargestellt. Das erste <button> Kind stellt die Steuerungstaste dar, die den Picker öffnet, wenn sie gedrückt wird.

Dies ermöglicht es Ihnen, den gesamten Picker-Inhalt als einzelne Einheit zu behandeln, beispielsweise wenn Sie seinen Rahmen anpassen, ihn animieren lassen, wenn er erscheint und verschwindet, oder ihn an einem anderen als dem Standardort positionieren wollen. Unser Leitfaden zu anpassbaren Select-Elementen zeigt viele Beispiele für die Verwendung von ::picker(select).

Das <select> Element und der Picker haben automatisch eine implizite Invoker/Popover-Beziehung zugewiesen, wie durch die Popover API spezifiziert. Siehe Verwendung der Popover-API für weitere Details zum Popover-Verhalten und Animation des Dropdown-Pickers anhand von Popover-Zuständen für einen typischen Anwendungsfall, der durch die implizite Popover-Zuordnung erlaubt wird.

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

• Die Standardstile des Browsers positionieren den Picker relativ zur Taste (dem Anker) und Sie können diese Position anpassen, wie im Abschnitt Elemente relativ zu ihrem Anker positionieren erklärt wird. Zur Referenz sind die entsprechenden Standardstile wie folgt:

  cssCopy to Clipboard

  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 ebenfalls einige Position-Try-Backups, die den Picker neu positionieren, wenn er Gefahr läuft, den Viewport zu überschreiten. Position-Try-Backups werden im Abschnitt Umgang mit Überlauf: Try-Backups und bedingtes Ausblenden erklärt. Zur Referenz sind die entsprechenden standardmäßigen Backupstile wie folgt:

  cssCopy to Clipboard

  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;
  

Um die Funktionalität eines anpassbaren Selects und die minimalen Standardstile des Browsers zu verwenden (und das vom Betriebssystem bereitgestellte Styling zu entfernen), müssen das <select> Element und sein Picker beide einen appearance Wert von base-select gesetzt haben:

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

Sie könnten dann beispielsweise den standardmäßigen schwarzen border des Pickers entfernen:

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

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