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 komplex und es hat lange gedauert, bis wir sie richtig hinbekommen haben. Wir sind aber 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 Funktionen der Webplattform 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 diese Codepen-Sammlung ansehen, um sie alle an einem Ort zu sehen.
Verwenden Sie dieses Formular, um uns Feedback zur Funktion zu 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 für die Auswahlschaltfläche auf der Seite als auch für die Auswahlliste. Wenn Sie die Funktion aktivieren möchten, legen Sie appearance: base-select für das <select>-Element und für das ::picker(select)-Element fest.
::picker(select) ist ein neues vom User-Agent bereitgestelltes Pseudo-Element, das nur für <select>-Elemente gilt, für die das neue Verhalten mit appearance: base-select aktiviert wurde. Dieses Pseudo-Element ist das Pop-up, das durch die Auswahlschaltflä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 enthält einige Standardstile, 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-up, das alle Inhalte außerhalb des button in einer anpassbaren Auswahl enthält.
Sie können jeden Teil des Auswahlelements formatieren. 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 kein Häkchen im Pseudo-Element ::before der Option haben möchten, verwenden Sie das folgende CSS.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Innerhalb des „select“-Elements kann es zwar eine unbegrenzte Anzahl von Elementen geben, der Browser fasst jedoch alles außerhalb eines <button>-Elements in das Pseudoelement ::picker(select) zusammen, das sich wie ein Pop-up-Fenster verhält, das an der Schaltfläche verankert ist. Mit diesem <button> wird die ::picker(select) ein- und ausgeschaltet. Optionen und andere Elemente direkt in der Auswahl werden in die ::picker(select) verschoben. Sie können auch einen eigenen Wrapper für das Styling 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 aus Pop-ups und Ankern. 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.
Mithilfe der Ankerpositionierung können Sie dieses ::picker(select)-Pop-up-Fenster stylen und beispielsweise an anderen Elementen ankern. Dieses Inhaltsmodell bedeutet auch, dass Animationsstile der obersten Ebene mit der Optionsliste funktionieren, um Ein- und Ausblendeffekte 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 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 werden durch die Wiederverwendung von <select> weiterhin aussagekräftige Inhalte auf Ihrer Seite angezeigt. Das folgende Beispiel zeigt die benutzerdefinierte Auswahl im Vergleich zu dem, 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
Änderungen können so einfach sein wie das visuelle Styling des ausgewählten Elements. 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 in Optionen
Du kannst nicht nur Strings in den <option>-Elementen in <select> hinzufügen, sondern auch Inhalte stylen. Ein einfaches Beispiel wäre das Hinzufügen von Flaggenbildern neben Ländernamen in einem Drop-down-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 Profilbilder, Namen und alternative Informationen enthalten, die Ihnen bei der Entscheidung helfen, welchen Artikel Sie im Drop-down-Menü auswählen möchten.
<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>
Stil der ausgewählten Option festlegen
Möglicherweise möchten Sie, dass die ausgewählte Option im ausgewählten Status anders angezeigt wird als im Drop-down-Menü. Ein Beispiel hierfür ist die Gmail-Benutzeroberfläche, bei der das Label aus Platzgründen entfernt wird, sobald die Option ausgewählt wurde. Dazu greifen Sie für das Styling auf das Element <selectedoption> zurück. <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 in <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 der ::picker(select) und können auf der vorherigen Demo aufbauen, um sie beim Hovern und Fokus interaktiv zu machen. 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 sind im vorgeschlagenen Inhaltsmodell nur die Elemente<div>,<span>,<option>,<optgroup>,<img>,<svg>und<hr>zulässig. - Getrennte Schaltflächen befinden sich derzeit in der Testphase, da wir an einer barrierefreien Lösung arbeiten.
In Zukunft wird das Inhaltsmodell voraussichtlich erweitert, um flexibler zu sein, da die Barrierefreiheit für diese Funktionen weiter ausgebaut wird.
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 Formularsteuerelemente im Web zu entwickeln.