Anfrage für Entwicklerfeedback: anpassbare Auswahl

Una Kravets

Das Gestalten von Formularsteuerelementen wie dem <select>-Element wird seit Jahren als eines der größten Probleme für Entwickler genannt. Wir haben an einer Lösung gearbeitet. Diese Arbeit ist komplex und es hat lange gedauert, bis wir sie richtig hinbekommen haben, aber wir sind kurz davor, diese Funktion einzuführen. Eine anpassbare Version des select-Elements befindet sich offiziell in Phase 2 der WHATWG. Es besteht großes Interesse an der Browserkompatibilität und es gibt einen Prototyp, den Sie ab Chrome Canary 130 testen können.

Probiert es aus und gebt uns Feedback

Prüfen Sie, ob Ihre Installation von Chrome Canary auf Version 130 aktualisiert ist und ob das Flag für experimentelle Webplattformfunktionen aktiviert ist. Sie können dieses Flag aktivieren, indem Sie „chrome://flags“ in die Adressleiste eingeben und #experimental-web-platform-features aktivieren. Danach sollten Sie die Codepen-Demos in diesem Beitrag sehen können. Alternativ können Sie sich diese Codepen-Sammlung ansehen, um alle Beispiele an einem Ort zu finden.

Über dieses Formular können Sie Feedback zur Funktion geben. Das Ausfüllen dauert nur drei Minuten.

Sehen wir uns die Funktionen der Customizable Select API an, die auf dem vorhandenen HTML-Tag „select“ basiert.

Aktivierung des neuen <select>

Wenn ihr das neue Verhalten aktivieren möchtet, verwendet die CSS-Eigenschaft appearance sowohl für die Schaltfläche zur In-Page-Auswahl als auch für die Auswahl. Wenn Sie die Funktion aktivieren möchten, legen Sie appearance: base-select für das <select>-Element und für das ::picker(select) fest.

::picker(select) ist ein neues, vom User-Agent bereitgestelltes Pseudoelement, das nur für <select>-Elemente gilt, die mit appearance: base-select für das neue Verhalten aktiviert wurden. Dieses Pseudoelement für die Auswahl ist das Pop-over, das durch die Schaltfläche für die Basisauswahl ausgelöst wird. Sie können beide aktivieren, wie im folgenden Code gezeigt:

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

Sie können auch nur die In-Page-Schaltfläche aktivieren, aber nicht nur das Pop-over für die Auswahl, ohne die In-Page-Schaltfläche zu aktivieren. ::picker(select) wird erst erstellt, wenn appearance: base-select auf <select> angewendet wird.

Jetzt können Sie das Auswahlelement anpassen. Das neue anpassbare „select“-Element enthält einige Standardstile, die in allen Browsern und Betriebssystemen gleich aussehen. So sieht das standardmäßige benutzerdefinierte „select“-Element im Vergleich zum vorhandenen „select“-Element in Chrome unter macOS aus:

Die einzelnen Teile

Im neuen anpassbaren Auswahlmodus haben Sie Zugriff auf die folgenden neuen Elemente: - selectedoption: spiegelt das innere HTML der aktuell ausgewählten Option wider. - option::before: enthält ein Häkchen, um die aktuell ausgewählte Option als Standard-Bedienungshilfe anzuzeigen (dies kann sich ändern). - ::picker(select): Popover, das den gesamten Inhalt außerhalb des button innerhalb einer anpassbaren Auswahl enthält.

Sie können jeden Teil des Auswahlfelds gestalten. Sie können beispielsweise beliebige nicht interaktive Inhalte in die <option>-Elemente einfügen, die In-Page-Schaltfläche gestalten, über die das Drop-down-Menü geöffnet wird, und die Drop-down-Liste mit Optionen (::picker(select)) gestalten.

Sie können auch den button-Indikator und den eigenen Pfeilindikator formatieren und beliebige Inhalte innerhalb und außerhalb der Elemente hinzufügen. Sie können nicht nur Inhalte hinzufügen, sondern auch alle diese neuen Elemente und Standardstile ausblenden. Wenn Sie beispielsweise kein Häkchen im Pseudoelement „::before“ der Option haben möchten, verwenden Sie das folgende CSS.

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

In der Auswahl kann es zwar unbegrenzt viele Elemente geben, der Browser fasst jedoch alles außerhalb eines <button>-Elements im Pseudoelement ::picker(select) zusammen, das sich wie ein Popover verhält, das an der Schaltfläche verankert ist. Mit diesem <button> wird die ::picker(select) ein- und ausgeschaltet. Optionen und andere Elemente direkt im Auswahlfeld werden in das ::picker(select)-Element verschoben. Sie können aber auch einen eigenen Wrapper für die Gestaltung verwenden. Auch dieser Wrapper wird im Pseudoelement ::picker(select) platziert.

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

Das neue anpassbare <select>-Element nutzt Funktionen von Popover und Ankerpositionierung. Sie basiert auf diesen beiden Technologien. Das bedeutet, dass die Drop-down-Optionsliste innerhalb eines Auswahlfelds als Popover fungiert, das an der Auslöseschaltfläche verankert ist, die das Auswahlfeld öffnet.

Sie können die Ankerpositionierung verwenden, um dieses ::picker(select)-Popover zu gestalten (einschließlich der Verankerung an anderen Elementen). Dieses Inhaltsmodell bedeutet auch, dass Animationen der obersten Ebene mit der Optionsliste funktionieren, um Ein- und Ausblendeffekte zu animieren.

Erweitern Sie das vorhandene <select>-Element.

Zuvor hatte das Chrome-Team die Idee eines <selectlist>-Elements entwickelt. In diesem Beitrag wird beschrieben, wie diese Funktion so umgestaltet wurde, dass stattdessen das vorhandene <select>-Element wiederverwendet wird.

Einer der Hauptvorteile der Wiederverwendung des vorhandenen <select>-Elements ist die Möglichkeit, das grundlegende HTML-Element schrittweise zu verbessern. Im Vergleich zu einem ganz neuen Element wird durch die Wiederverwendung von <select> weiterhin relevanter Inhalt auf Ihrer Seite gerendert. Das folgende Beispiel zeigt die benutzerdefinierte Auswahl im Vergleich zu dem, was ein Nutzer in einem nicht unterstützten Browser sehen würde:

Grundlegende Stile

Änderungen können so einfach sein wie das visuelle Styling des Auswahlelements. Beispielsweise können Sie die Schaltflächenstile, die Hover- und Fokusstile oder den Hintergrund der Auswahloptionen aktualisieren. Nachdem Sie die Funktion mit appearance: base-select aktiviert haben, können Sie die gewünschten CSS-Stile auf die Teile des Auswahlfelds anwenden.

Wenn Sie den Pfeilindikator anpassen möchten, fügen Sie in der Auswahl einen eigenen Button und Pfeil hinzu.

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

Gestalten Sie dann den Pfeil:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

Komplexe Inhalte innerhalb von Optionen

Sie können auch Inhalte hinzufügen und gestalten, die über Strings in den <option>-Elementen innerhalb von <select> hinausgehen. Ein einfaches Beispiel ist das Hinzufügen von Flaggenbildern neben Ländernamen in einem Drop-down-Menü. Fügen Sie dazu ein Bildelement neben dem Optionstext ein.

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

Ein komplexeres Beispiel könnte Profilfotos, Namen und alternative Informationen enthalten, die Ihnen bei der Auswahl des richtigen Elements im Drop-down-Menü helfen.

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

Ausgewählte Option formatieren

Möglicherweise möchten Sie, dass die ausgewählte Option im ausgewählten Zustand anders angezeigt wird als im Drop-down-Menü. Ein Beispiel hierfür ist die Gmail-Benutzeroberfläche, auf der das Label entfernt wird, sobald die Option ausgewählt wurde, um Platz zu sparen. Dazu hängen Sie sich für das Styling in das <selectedoption>-Element ein. <option> enthält das gesamte folgende Markup:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

Wenden Sie jetzt display: none auf .text innerhalb von <selectedoption> an, um den Textinhalt auszublenden und nur das Symbol anzuzeigen:

selectedoption .text {
  display: none;
}

Interaktive Optionen

Sie haben die volle Kontrolle über das Styling des ::picker(select). Bauen Sie auf der vorherigen Demo auf, um es beim Bewegen des Mauszeigers und beim Fokussieren interaktiv zu machen. In dieser Demo wird die neue Funktion calc-size() verwendet, um die Breite der Auswahl zu animieren. Wenn der Nutzer den Mauszeiger darauf bewegt oder eine Option mit „focus-visible“ ausgewählt ist, wird die Breite von der Anzeige der Symbole auf die Anzeige der vollen Breite der Optionen geändert.

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

Einschränkungen und Hinweise zur Barrierefreiheit im Internet

Viel Macht erfordert viel Verantwortung Damit die Funktion für alle zugänglich bleibt, gibt es einige Einschränkungen.

• Außer <option>-Elementen sind im <select> noch keine interaktiven (fokussierbaren) Elemente wie Schaltflächen oder andere Elemente zulässig. Derzeit sind im vorgeschlagenen Inhaltsmodell nur die Elemente <div>, <span>, <option>, <optgroup>, <img>, <svg> und <hr> zulässig.
• Geteilte Schaltflächen befinden sich derzeit in der Testphase, da wir an einer barrierefreien Lösung arbeiten.

In Zukunft wird das Inhaltsmodell voraussichtlich flexibler gestaltet, da die Barrierefreiheit für diese Inhalte verbessert wird.

Fazit

Wir freuen uns darauf, dass diese Funktion von Arbeitsgruppen und Normungsgremien weiterentwickelt wird, und werden über unsere Fortschritte berichten, während wir den Prototyp aktiv entwickeln und die Form dieser Funktion bewerten. Wenn etwas nicht wie erwartet funktioniert, lass es uns wissen.

Diese Funktion befindet sich noch in der Entwicklung. Wir würden uns über Ihr Feedback über dieses kurze Feedbackformular freuen.

Vielen Dank, dass Sie uns dabei helfen, die richtigen Entscheidungen zu treffen und die Erstellung barrierefreier, anpassbarer Formularsteuerelemente im Web zu vereinfachen.