Das Styling von Formularelementen wie dem <select>-Element wird seit Jahren als einer der größten Probleme von Entwicklern eingestuft. Wir arbeiten daher an einer Lösung. Diese Arbeit ist zwar komplex und ihre Umsetzung hat viel Zeit in Anspruch genommen. Wir sind jedoch kurz davor, diese Funktion einzuführen. Eine anpassbare Version des „select“-Elements befindet sich offiziell in der Phase 2 der WHATWG. Es wird von vielen Browsern unterstützt und es gibt einen Prototyp, den Sie in Chrome Canary 130 testen können.
Probieren Sie es aus und geben Sie uns Feedback
Prüfen Sie, ob Ihre Installation von Chrome Canary auf Version 130 aktualisiert ist und die experimentellen Webplattformfunktionen aktiviert sind. Sie können dieses Flag aktivieren, indem Sie in der Adressleiste chrome://flags aufrufen und #experimental-web-platform-features aktivieren. Danach sollten Sie die Codepen-Demos in diesem Beitrag sehen können. Alternativ können Sie sich auch diese Codepen-Sammlung ansehen, um sie alle an einem Ort anzusehen.
Über dieses Formular können Sie uns Feedback zu dieser Funktion geben. Das dauert nur drei Minuten.
Sehen wir uns die Funktionen der anpassbaren Select API an, die auf dem vorhandenen HTML-Select-Tag basiert.
Neue <select> aktivieren
Wenn Sie das neue Verhalten aktivieren möchten, verwenden Sie die CSS-Eigenschaft appearance sowohl auf der In-Page-Auswahlschaltfläche als auch in der Auswahlauswahl. Für die Aktivierung musst du appearance: base-select für dein <select>-Element und das ::picker(select) festlegen.
::picker(select) ist ein neues, vom User-Agent bereitgestelltes Pseudoelement, das nur für <select>-Elemente gilt, für die das neue Verhalten mit appearance: base-select aktiviert wurde. Dieses Pseudoelement für die Auswahl ist das Pop-over, das von der Basisauswahlschaltfläche ausgelöst wird. Sie können beide aktivieren, wie im folgenden Code gezeigt:
select,
::picker(select) {
appearance: base-select;
}
Sie können nur die Schaltfläche auf der Seite aktivieren. Das Pop-up-Menü kann jedoch nicht ohne die Schaltfläche auf der Seite aktiviert werden. ::picker(select) wird erst erstellt, wenn appearance: base-select auf <select> angewendet wird.
Jetzt können Sie das ausgewählte Element anpassen. Die neue anpassbare Auswahl verfügt über einige Standardformate, die in allen Browsern und Betriebssystemen gleich aussehen. Hier sehen Sie die standardmäßige benutzerdefinierte Auswahl im Vergleich zur vorhandenen Auswahl in Chrome unter macOS:
Die einzelnen Teile aufschlüsseln
Im neuen anpassbaren Auswahlmodus stehen Ihnen folgende neue Elemente zur Verfügung:
– selectedoption: Stellt den inneren HTML-Code der aktuell ausgewählten Option dar.
– option::before: enthält ein Häkchen, das die aktuell ausgewählte Option als Standardoption für Barrierefreiheit kennzeichnet (dies kann sich ändern).
– ::picker(select): Pop-over, das alle Inhalte außerhalb von button in einer anpassbaren Auswahl enthält.
Sie können jeden Teil der Auswahl gestalten. Sie können beispielsweise beliebige nicht interaktive Inhalte in die <option>-Elemente einfügen, die Schaltfläche auf der Seite, die das Drop-down-Menü öffnet, und die Drop-down-Liste mit Optionen (::picker(select)) formatieren.
Sie können auch den button-Pfeil und beliebige Inhalte innerhalb und um die Elemente herum gestalten. Sie können nicht nur Inhalte hinzufügen, sondern auch alle neuen Elemente und Standardstile ausblenden. Wenn Sie beispielsweise im ::before-Pseudoelement der Option kein Häkchen setzen möchten, verwenden Sie den folgenden CSS-Code.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Die Auswahl kann beliebig viele Elemente enthalten. Der Browser gruppiert jedoch alles außerhalb eines <button>-Elements im Pseudoelement ::picker(select), das sich wie ein an der Schaltfläche verankertes Pop-over verhält. Mit <button> wird ::picker(select) umgeschaltet. Optionen und andere Elemente direkt innerhalb der Auswahl werden in den ::picker(select) gezogen. Du kannst aber auch deinen eigenen Wrapper für Gestaltungszwecke verwenden. Auch dieser Wrapper wird innerhalb des Pseudoelements ::picker(select) platziert.
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Die neue anpassbare <select> nutzt Funktionen wie Popover und Ankerpositionierung. Es basiert auf diesen beiden zugrunde liegenden Technologien. Das bedeutet, dass die Drop-down-Liste in einem Auswahlelement als Pop-over dient, das an der Triggerschaltfläche verankert ist, über die das Auswahlelement geöffnet wird.
Sie können die Ankerpositionierung verwenden, um das ::picker(select)-Pop-over zu gestalten und es z. B. mit anderen Elementen zu verankern. Bei diesem Inhaltsmodell können außerdem die Stile der Animation der obersten Ebene mit der Optionsliste verwendet werden, um Eingangs- und Exit-Effekte zu animieren.
Vorhandenes <select>-Element verbessern
Zuvor hatte das Chrome-Team an der Idee eines <selectlist>-Elements gearbeitet. In diesem Beitrag wird beschrieben, wie diese Funktion neu gestaltet wurde, um stattdessen das vorhandene <select>-Element wiederzuverwenden.
Einer der wichtigsten Vorteile der Wiederverwendung des vorhandenen <select>-Elements ist die Möglichkeit, das einfache HTML-Element schrittweise zu verbessern. Im Vergleich zu einem ganz neuen Element werden durch die Wiederverwendung von <select> weiterhin aussagekräftige Inhalte auf Ihrer Seite gerendert. Das folgende Beispiel zeigt die benutzerdefinierte Auswahl im Vergleich dazu, was ein Nutzer in einem nicht unterstützten Browser sehen würde:
option wird in der Fallback-Version des ausgewählten Elements gerendert.Einfaches Design
Dabei kann es sich um einfache Änderungen wie den visuellen Stil des ausgewählten Elements handeln. Sie können beispielsweise die Schaltflächen-, Hover- und Fokusstile oder den Hintergrund der ausgewählten Optionen aktualisieren. Nachdem Sie die Teilnahme bei appearance: base-select aktiviert haben, können Sie die gewünschten Preisvergleichsportale auf die ausgewählten Bereiche anwenden.
Wenn Sie den Pfeilsymbol anzeigen lassen möchten, fügen Sie eine eigene Schaltfläche und einen eigenen Pfeil in die Auswahl ein.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Legen Sie dann den Stil für den Pfeil fest:
/* 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
Du kannst nicht nur Strings in den <option>-Elementen in <select> hinzufügen, sondern auch Inhalte stylen. Ein einfaches Beispiel ist das Hinzufügen von Flaggenbildern neben Ländernamen in einem Dropdown-Menü. Fügen Sie dazu ein Bildelement neben dem Optionstext hinzu.
<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 Entscheidung helfen, welches Element Sie im Drop-down-Menü auswählen sollten.
<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 gestalten
Möglicherweise möchten Sie, dass die ausgewählte Option im ausgewählten Status anders angezeigt wird als im Drop-down-Menü. Ein Beispiel dafür ist die Benutzeroberfläche von Gmail, wo das Label aus Platzgründen entfernt wird, sobald die Option ausgewählt wurde. Binden Sie dazu das <selectedoption>-Element für die Gestaltung ein. <option> enthält das 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 in <selectedoption> an, um den Textinhalt auszublenden und nur das Symbol anzuzeigen:
selectedoption .text {
display: none;
}
Interaktive Optionen
Du hast die volle Kontrolle über das Design von ::picker(select) und kannst es jetzt interaktiv gestalten, wenn du den Mauszeiger darauf bewegst und den Fokus darauf setzt. In dieser Demo wird die neue Funktion calc-size() verwendet, um die Breite der Auswahl so zu animieren, dass beim Bewegen des Mauszeigers oder wenn die Auswahl eine Option mit „focus-visible“ hat, die Symbole nicht mehr angezeigt werden, sondern die volle Breite der Optionen.
/* 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
Mit großer Macht kommt große Verantwortung. Die Funktion ist jedoch eingeschränkt, um die Barrierefreiheit zu gewährleisten.
- Außer
<option>-Elementen sind im<select>derzeit keine interaktiven (fokussierbaren) Elemente wie Schaltflächen oder andere Elemente zulässig. Derzeit unterstützt das vorgeschlagene Inhaltsmodell nur die Elemente<div>,<span>,<option>,<optgroup>,<img>,<svg>und<hr>. - Die Split-Schaltflächen befinden sich derzeit in der Testphase, um eine barrierefreie Lösung zu finden.
In Zukunft soll das Inhaltsmodell erweitert und flexibler gestaltet werden, da die Barrierefreiheitsgeschichte für diese Angebote ausgearbeitet ist.
Fazit
Wir freuen uns, diese Funktion in Arbeitsgruppen und Normungsgremien voranzubringen und unsere Fortschritte zu teilen, während wir den Prototyp aktiv erstellen und die Form dieser Funktion bewerten. Wenn etwas nicht wie erwartet funktioniert, lass es uns wissen.
Diese Funktion befindet sich noch in der Entwicklungsphase. Wir würden uns aber über dein Feedback in diesem kurzen Feedback-Formular freuen.
Vielen Dank, dass Sie uns dabei geholfen haben, barrierefreie, anpassbare Formularelemente im Web zu entwickeln.