Anpassbare Select-Elemente

Hintergrund

Traditionell war es schwierig, das Erscheinungsbild von <select>-Elementen anzupassen, da sie interne Teile enthalten, die auf Betriebssystemebene gestylt sind und nicht mit CSS angesprochen werden können. Dazu gehören der Drop-Down-Picker, das Pfeilsymbol und so weiter.

Bisher war die beste verfügbare Option – abgesehen von der Verwendung einer benutzerdefinierten JavaScript-Bibliothek – ein appearance-Wert von none für das <select>-Element festzulegen, um einige der Betriebssystem-Styles zu entfernen, und dann CSS zu verwenden, um die Teile, die gestylt werden können, anzupassen. Diese Technik wird in Erweitertes Formularstyling erklärt.

Anpassbare <select>-Elemente bieten eine Lösung für diese Probleme. Sie ermöglichen es Ihnen, Beispiele wie das folgende nur mit HTML und CSS zu erstellen, die in unterstützenden Browsern vollständig anpassbar sind. Dies umfasst <select>- und Drop-Down-Picker-Layout, Farbschema, Symbole, Schriftart, Übergänge, Positionierung, Markierungen zur Kennzeichnung des ausgewählten Symbols und mehr.

Darüber hinaus bieten sie eine progressive Verbesserung auf Basis der vorhandenen Funktionalität, indem sie in nicht unterstützenden Browsern auf "klassische" Selects zurückfallen.

Sie erfahren in den folgenden Abschnitten, wie Sie dieses Beispiel erstellen können.

Welche Funktionen umfasst ein anpassbares Select?

Sie können anpassbare <select>-Elemente mit den folgenden HTML- und CSS-Funktionen erstellen:

• Gewöhnliche <select>, <option> und <optgroup>-Elemente. Diese funktionieren genau wie in "klassischen" Selects, nur dass sie zusätzliche erlaubte Inhaltstypen haben.
• Ein <button>-Element, das als erstes Kind innerhalb des <select>-Elements enthalten ist, was in "klassischen" Selects bisher nicht erlaubt war. Wenn dies enthalten ist, ersetzt es das Standard-"Button"-Rendering des geschlossenen <select>-Elements. Dies wird allgemein als Select-Button bezeichnet (da es der Button ist, den Sie drücken müssen, um den Drop-Down-Picker zu öffnen).

  Hinweis: Der Select-Button ist standardmäßig inert, damit interaktive Kinder (zum Beispiel Links oder Buttons) enthalten sein können, aber dennoch als einzelner Button für Interaktionen behandelt wird — zum Beispiel werden die Kind-Elemente nicht fokussierbar oder klickbar sein.

• Das <selectedcontent>-Element kann optional innerhalb des ersten Kind-<button>-Elements des <select>-Elements enthalten sein, um den aktuell ausgewählten Wert im geschlossenen <select>-Element anzuzeigen. Es enthält einen Klon des Inhalts des aktuell ausgewählten <option>-Elements (erstellt mit cloneNode() im Hintergrund).
• Das ::picker(select)-Pseudo-Element, das den gesamten Inhalt des Pickers anvisiert. Dazu gehören alle Elemente innerhalb des <select>-Elements, außer dem ersten Kind-<button>.
• Der appearance-Eigenschaftswert base-select, der das <select>-Element und das ::picker(select)-Pseudo-Element in die vom Browser definierten Standardstile und das Verhalten für anpassbare Selects einfügt.
• Die :open-Pseudoklasse, die den Select-Button anvisiert, wenn der Picker (::picker(select)) geöffnet ist.
• Das ::picker-icon-Pseudo-Element, das das Symbol im Select-Button anvisiert — den Pfeil, der nach unten zeigt, wenn der Select geschlossen ist.
• Die :checked-Pseudoklasse, die das aktuell ausgewählte <option>-Element anvisiert.
• Das ::checkmark-Pseudo-Element, das das Häkchen im aktuell ausgewählten <option>-Element anvisiert, um eine optische Anzeige zu geben, welches ausgewählt ist.

Darüber hinaus hat das <select>-Element und sein Drop-Down-Picker eine implizite Ankerreferenz, was bedeutet, dass der Picker automatisch mit dem <select>-Element über die CSS-Ankerpositionierung verknüpft ist. Die vom Browser vorgegebenen Stile positionieren den Picker relativ zum Button (dem Anker) und Sie können diese Position anpassen, wie in Positionierung von Elementen relativ zu ihrem Anker erklärt. Die standardmäßig festgelegten Browserstile definieren auch einige Position-Try-Fallbacks, die den Picker neu positionieren, wenn die Gefahr besteht, dass er über den Viewport hinausgeht. Position-Try-Fallbacks werden in Umgang mit Overflow: Try-Fallbacks und bedingtes Verbergen erklärt.

Sehen wir uns alle oben genannten Funktionen in Aktion an, indem wir das Beispiel vom Anfang der Seite durchgehen.

Anpassbares Select-Markup

Unser Beispiel ist ein typisches <select>-Menü, mit dem Sie ein Haustier auswählen können. Das Markup sieht folgendermaßen aus:

<form>
  <p>
    <label for="pet-select">Select pet:</label>
    <select id="pet-select">
      <button>
        <selectedcontent></selectedcontent>
      </button>

      <option value="">Please select a pet</option>
      <option value="cat">
        <span class="icon" aria-hidden="true">🐱</span
        ><span class="option-label">Cat</span>
      </option>
      <option value="dog">
        <span class="icon" aria-hidden="true">🐶</span
        ><span class="option-label">Dog</span>
      </option>
      <option value="hamster">
        <span class="icon" aria-hidden="true">🐹</span
        ><span class="option-label">Hamster</span>
      </option>
      <option value="chicken">
        <span class="icon" aria-hidden="true">🐔</span
        ><span class="option-label">Chicken</span>
      </option>
      <option value="fish">
        <span class="icon" aria-hidden="true">🐟</span
        ><span class="option-label">Fish</span>
      </option>
      <option value="snake">
        <span class="icon" aria-hidden="true">🐍</span
        ><span class="option-label">Snake</span>
      </option>
    </select>
  </p>
</form>

Das Beispiel-Markup ist fast das gleiche wie das Markup eines "klassischen" <select>, mit den folgenden Unterschieden:

• Die <button><selectedcontent></selectedcontent></button>-Struktur stellt den Select-<button> dar. Durch das Hinzufügen des <selectedcontent>-Elements klont der Browser das derzeit ausgewählte <option> innerhalb des Buttons, den Sie dann mit benutzerdefinierten Styles versehen können. Wenn diese Struktur nicht in Ihrem Markup enthalten ist, fällt der Browser auf das Rendering des Textes der ausgewählten Option innerhalb des Standard-Buttons zurück, was es schwieriger macht, es zu stylen.

  Hinweis: Sie können beliebige Inhalte innerhalb des <button> einfügen, um das anzuzeigen, was Sie im geschlossenen <select> anzeigen möchten, sollten dabei jedoch vorsichtig sein. Was Sie einschließen, kann den barrierefreien Wert beeinflussen, der für unterstützende Technologien für das <select>-Element bereitgestellt wird.

• Der Rest des <select>-Inhalts stellt den Drop-Down-Picker dar, der normalerweise auf die <option>-Elemente beschränkt ist, die die verschiedenen Auswahlmöglichkeiten im Picker darstellen. Sie können andere Inhalte in den Picker einfügen, es wird jedoch nicht empfohlen.

• Traditionell konnten <option>-Elemente nur Text enthalten, aber in einem anpassbaren Select können Sie auch andere Markup-Strukturen wie Bilder, andere nicht-interaktive textbasierte semantische Elemente und mehr einfügen. Sie können sogar die ::before- und ::after-Pseudo-Elemente verwenden, um andere Inhalte hinzuzufügen. Beachten Sie jedoch, dass dies nicht Bestandteil des übermittelbaren Wertes sein würde. In unserem Beispiel enthält jedes <option> zwei <span>-Elemente, die jeweils ein Symbol und eine Textbeschriftung enthalten, sodass jedes Element unabhängig gestylt und positioniert werden kann.

  Hinweis: Da der <option>-Inhalt nicht nur aus Textknoten, sondern auch aus mehrstufigen DOM-Unterbäumen bestehen kann, gibt es Regeln, wie der Browser den aktuellen <select>-Wert über JavaScript extrahieren sollte. Der Wert der textContent-Eigenschaft des ausgewählten <option>-Elements wird abgerufen, trim() darauf ausgeführt und das Ergebnis wird als <select>-Wert festgelegt.

Dieses Design ermöglicht es nicht unterstützenden Browsern, auf ein klassisches <select>-Erlebnis zurückzugreifen. Die <button><selectedcontent></selectedcontent></button>-Struktur wird vollständig ignoriert, und die Nicht-Text-<option>-Inhalte werden entfernt, um nur die Textknoten-Inhalte übrig zu lassen, aber das Ergebnis funktioniert dennoch.

Wechsel zum benutzerdefinierten Select-Rendering

Um sich in die benutzerdefinierte Select-Funktionalität und minimalen Browser-Basisstile einzuklinken (und das durch das Betriebssystem bereitgestellte Styling zu entfernen), müssen sowohl Ihr <select>-Element als auch sein Drop-Down-Picker (dargestellt durch das ::picker(select)-Pseudo-Element) einen appearance-Wert von base-select gesetzt haben:

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

* {
  box-sizing: border-box;
}

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: 100%;
  padding: 0 10px;
  max-width: 480px;
  margin: 0 auto;
}

h2 {
  font-size: 1.2rem;
}

p {
  display: flex;
  gap: 10px;
}

label {
  width: fit-content;
  align-self: center;
}

select {
  flex: 1;
}

Sie können wählen, nur das <select>-Element für die neue Funktionalität einzuklinken und den Picker mit dem Standard-OS-Styling zu belassen, jedoch werden Sie in den meisten Fällen beide einklinken wollen. Sie können den Picker nicht einklinken, ohne das <select>-Element einzuklinken.

Sobald dies erledigt ist, erhalten Sie eine sehr einfache Darstellung eines <select>-Elements:

Sie sind jetzt frei, dies nach Belieben zu stylen. Um zu beginnen, hat das <select>-Element benutzerdefinierte border, background (welches sich bei :hover oder :focus ändert) und padding-Werte gesetzt sowie eine transition, damit die Hintergrundänderung sanft animiert wird:

select {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
  transition: 0.4s;
}

select:hover,
select:focus {
  background: #dddddd;
}

Styling des Picker-Symbols

Um das Symbol im Select-Button zu stylen — den Pfeil, der nach unten zeigt, wenn der Select geschlossen ist — können Sie es mit dem ::picker-icon-Pseudo-Element anvisieren. Der folgende Code gibt dem Symbol eine benutzerdefinierte color und eine transition, sodass Änderungen an seiner rotate-Eigenschaft sanft animiert werden:

select::picker-icon {
  color: #999999;
  transition: 0.4s rotate;
}

Anschließend wird ::picker-icon mit der :open-Pseudoklasse kombiniert — die den Select-Button nur anvisiert, wenn der Drop-Down-Picker geöffnet ist — um dem Symbol einen rotate-Wert von 180deg zu geben, wenn das <select> geöffnet ist.

select:open::picker-icon {
  rotate: 180deg;
}

Sehen wir uns die bisherige Arbeit an — beachten Sie, wie der Picker-Pfeil sich sanft um 180 Grad dreht, wenn das <select> geöffnet und geschlossen wird:

Styling des Drop-Down-Pickers

Der Drop-Down-Picker kann mit dem ::picker(select)-Pseudo-Element anvisiert werden. Wie bereits erwähnt, enthält der Picker alles innerhalb des <select>-Elements, das nicht der Button und das <selectedcontent> ist. In unserem Beispiel bedeutet das alle <option>-Elemente und deren Inhalte.

Zunächst wird die standardmäßige schwarze border des Pickers entfernt:

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

Nun werden die <option>-Elemente gestylt. Sie sind layoutiert mit Flexbox, richten sie alle am Anfang des Flexcontainers aus und fügen eine 20px gap zwischen jedem hinzu. Jedes <option> erhält auch die gleichen border, background, padding und transition-Werte wie das <select>, um ein einheitliches Erscheinungsbild zu erzeugen:

option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;

  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
  transition: 0.4s;
}

Anschließend wird eine Kombination der :first-of-type, :last-of-type und :not()-Pseudoklassen verwendet, um eine geeignete border-radius auf die oberen und unteren <option>-Elemente zu setzen und die border-bottom von allen <option>-Elementen zu entfernen – außer dem letzten, damit die Rahmen nicht unordentlich und doppelt aussehen. Wir setzen auch den gleichen border-radius auf den äußeren ::picker(select)-Container, damit wir nicht mit einer hässlichen quadratischen weißen Box um die Optionen herum enden, wenn wir entscheiden, eine andere Hintergrundfarbe auf der Seite zu setzen.

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

::picker(select) {
  border-radius: 8px;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

Als Nächstes wird eine andere background-Farbe auf die ungeraden <option>-Elemente mithilfe von :nth-of-type(odd) gesetzt, um Zebramusterung zu implementieren, und eine andere background-Farbe wird auf die <option>-Elemente bei Fokussierung und Hover gesetzt, um einen nützlichen visuellen Höhepunkt während der Auswahl zu bieten:

option:nth-of-type(odd) {
  background: white;
}

option:hover,
option:focus {
  background: plum;
}

Schließlich für diesen Abschnitt wird eine größere font-size auf die <option>-Symbole (enthalten innerhalb von <span>-Elementen mit einer Klasse von icon) gesetzt, um sie größer zu machen, und die text-box-Eigenschaft wird verwendet, um einige der störenden Abstände an den block-Anfangs- und block-Endkanten der Symbol-Emojis zu entfernen, um sie besser mit den Textlabels auszurichten:

option .icon {
  font-size: 1.6rem;
  text-box: trim-both cap alphabetic;
}

Unser Beispiel rendert nun folgendermaßen:

Anpassen des Stylings der Inhalte der ausgewählten Option innerhalb des Select-Buttons

Wenn Sie in den letzten Live-Beispielen eine Haustieroption auswählen, bemerken Sie ein Problem — die Haustiersymbole führen dazu, dass der Select-Button in der Höhe zunimmt, was auch die Position des Picker-Symbols verändert, und es gibt keinen Abstand zwischen dem Optionssymbol und dem Label.

Dies kann behoben werden, indem das Symbol ausgeblendet wird, wenn es im <selectedcontent> enthalten ist, das die Inhalte der ausgewählten <option> darstellt, wie sie im Select-Button erscheinen. In unserem Beispiel wird es mit display: none ausgeblendet:

selectedcontent .icon {
  display: none;
}

Dies beeinflusst nicht das Styling der <option>-Inhalte, wie sie im Drop-Down-Picker erscheinen.

Styling der aktuell ausgewählten Option

Um die derzeit ausgewählte <option> zu stylen, wie sie im Drop-Down-Picker erscheint, können Sie sie mit der :checked-Pseudoklasse anvisieren. Diese wird verwendet, um das font-weight des ausgewählten <option>-Elements auf bold zu setzen:

option:checked {
  font-weight: bold;
}

Styling des aktuellen Auswahlhäkchens

Sie haben wahrscheinlich bemerkt, dass beim Öffnen des Pickers, um eine Auswahl zu treffen, die derzeit ausgewählte <option> ein Häkchen am Inline-Start hat. Dieses Häkchen kann mit dem ::checkmark-Pseudo-Element anvisiert werden. Zum Beispiel könnten Sie dieses Häkchen ausblenden (zum Beispiel über display: none).

Sie könnten auch etwas Interessanteres damit machen — früher wurden die <option>-Elemente horizontal mit Flexbox layoutiert, wobei die Flex-Elemente am Anfang der Reihe ausgerichtet wurden. In der unten stehenden Regel wird das Häkchen vom Anfang der Reihe zum Ende verschoben, indem ihm ein order-Wert größer als 0 gegeben und es mit einem auto margin-left-Wert ans Ende der Reihe ausgerichtet wird (siehe Ausrichtung und Auto-Margen).

Schließlich wird der Wert der content-Eigenschaft auf ein anderes Emoji gesetzt, um ein anderes Symbol anzuzeigen.

option::checkmark {
  order: 1;
  margin-left: auto;
  content: "☑️";
}

Sehen wir uns wieder an, wie das Beispiel gerendert wird. Der aktualisierte Zustand nach den letzten drei Abschnitten ist wie folgt:

Animieren des Pickers mittels Popover-Zuständen

Der Select-Button des anpassbaren <select>-Elements und der Drop-Down-Picker erhalten automatisch eine Invoker/Popover-Beziehung, wie in Verwendung der Popover-API beschrieben. Es gibt viele Vorteile, die dies für <select>-Elemente bringt; unser Beispiel nutzt die Fähigkeit, zwischen Popover-versteckten und angezeigten Zuständen mittels Übergängen zu animieren. Die :open-Pseudoklasse repräsentiert Select-Elemente in einem offenen Zustand.

Die Technik wird in diesem Abschnitt schnell behandelt — lesen Sie Animieren von Popovers für eine detailliertere Beschreibung.

Zunächst wird der Picker mit ::picker(select) anvisiert und erhält einen opacity-Wert von 0 und einen transition-Wert von all 0.4s allow-discrete. Dies lässt alle Eigenschaften, die sich ändern, wenn der Popover-Zustand von versteckt zu angezeigt wechselt, animiert werden.

::picker(select) {
  opacity: 0;
  transition: all 0.4s allow-discrete;
}

Die Liste der übertragenen Eigenschaften umfasst opacity, jedoch auch zwei diskrete Eigenschaften, deren Werte durch die standardmäßigen Browserstile gesetzt werden:

display

Der display-Wert wechselt von none zu block, wenn der Popover-Zustand von versteckt zu angezeigt wechselt. Dies muss animiert werden, um sicherzustellen, dass andere Übergänge sichtbar sind.

overlay

Der overlay-Wert wechselt von none zu auto, wenn der Popover-Zustand von versteckt zu angezeigt wechselt, um ihn in die Top-Schicht zu befördern, dann zurück, wenn er versteckt wird, um ihn zu entfernen. Dies muss animiert werden, um sicherzustellen, dass die Entfernung des Popovers aus der Top-Schicht bis zum Abschluss des Übergangs verzögert wird, um sicherzustellen, dass der Übergang sichtbar ist.

Anschließend wird der Picker im angezeigten Zustand mit :open::picker(select) ausgewählt und erhält einen opacity-Wert von 1 — dies ist der Endzustand des Übergangs:

:open::picker(select) {
  opacity: 1;
}

Schließlich, da der Picker während der Verschiebung von display: none zu einem display-Wert, der ihn sichtbar macht, übergangen wird, muss der Startzustand des Übergangs innerhalb eines @starting-style-Blocks spezifiziert werden:

@starting-style {
  :open::picker(select) {
    opacity: 0;
  }
}

Diese Regeln arbeiten zusammen, um den Picker sanft ein- und auszublenden, wenn das <select> geöffnet und geschlossen wird.

Positionierung des Pickers mittels Ankerpositionierung

Der Select-Button eines anpassbaren <select>-Elements und der Drop-Down-Picker haben eine implizite Ankerreferenz, und der Picker ist automatisch mit dem Select-Button über CSS-Ankerpositionierung verbunden. Das bedeutet, dass keine explizite Verknüpfung mittels der anchor-name- und position-anchor-Eigenschaften vorgenommen werden muss.

Darüber hinaus bieten die standardmäßigen Browserstile eine Standardposition, die Sie anpassen können, wie in Positionierung von Elementen relativ zu ihrem Anker erklärt.

In unserem Demo wird die Position des Pickers relativ zu seinem Anker gesetzt, indem die anchor()-Funktion innerhalb seiner top- und left-Eigenschaftswerte verwendet wird:

::picker(select) {
  top: calc(anchor(bottom) + 1px);
  left: anchor(10%);
}

Dies führt dazu, dass die obere Kante des Pickers immer 1 Pixel unter der unteren Kante des Select-Buttons positioniert wird, und die linke Kante des Pickers immer 10% der Breite des Select-Buttons vom linken Rand aus positioniert wird.

Hauptergebnis des endgültigen Beispiels

Nach den letzten beiden Abschnitten wird unser <select> in diesem aktualisierten Zustand wie folgt gerendert:

Styling von Optgroups

Das Standardstyling von <optgroup>-Elementen in anpassbaren Selects ist dasselbe wie in klassischen <select>-Elementen — fett geschrieben und weniger eingerückt als die enthaltenen Optionen. In anpassbaren Selects verhalten sich Optgroups jedoch wie jeder andere Block-Level-Container und können entsprechend gestylt werden. Darüber hinaus wird das <legend>-Element als Kind von <optgroup> erlaubt, um eine Beschriftung zu bieten, die leicht anvisiert und gestylt werden kann. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements gesetzt ist, und hat die gleiche Semantik.

Sehen wir uns ein grundlegendes Beispiel an. Unser HTML sieht so aus:

<label for="animal-select">Select animal:</label><br />
<select id="animal-select">
  <optgroup>
    <legend>Domestic</legend>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="guinea">Guinea pig</option>
  </optgroup>
  <optgroup>
    <legend>Farm</legend>
    <option value="chicken">Chicken</option>
    <option value="cow">Cow</option>
    <option value="pig">Pig</option>
  </optgroup>
</select>

Wir beginnen unser CSS, indem wir die <optgroup>-Elemente selbst stylen. Dies sind größtenteils rudimentäre Stile, um die Optgroups wie Container für ihre Nachkommen-<option>-Elemente aussehen zu lassen. Wir haben ihnen ein wenig margin-top gegeben, um etwas Abstand zwischen jeder Optgroup und zwischen der oberen Optgroup und dem Select-Button zu schaffen.

* {
  box-sizing: border-box;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

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

select {
  border: 2px solid #ddd;
  background: #eee;
  padding: 10px;
}

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

optgroup {
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #eee;
  padding: 10px 0 0 0;
  margin-top: 5px;
}

Als Nächstes stylen wir die <legend>-Elemente, indem wir den Text zentrieren und etwas Rand einfügen, um sie von den Optionen zu trennen.

optgroup legend {
  text-align: center;
  margin-bottom: 10px;
}

Schließlich stylen wir die <option>-Elemente, indem wir ihnen eine background-Farbe und etwas padding geben und die untere border-radius des letzten <option> in jedem Fall stylen, um es in die abgerundeten Ecken des übergeordneten <optgroup> einzupassen. Wir implementieren auch Zebra-Streifen, indem wir den ungeraden <option>-Elementen eine andere Hintergrundfarbe geben, und bieten einen unterscheidbaren Options-Hover- und Fokus-Zustand.

option {
  background: #eee;
  padding: 10px;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:nth-of-type(odd) {
  background: #fff;
}

option:hover,
option:focus {
  background: plum;
}

Wir haben den Rest der Styles der Kürze halber ausgeblendet.

Das Beispiel rendert so:

@supports not (appearance: base-select) {
  body::before {
    content: "Your browser does not support `appearance: base-select`.";
    color: black;
    background-color: wheat;
    position: fixed;
    left: 0;
    right: 0;
    top: 40%;
    text-align: center;
    padding: 1rem 0;
    z-index: 1;
  }
}

Browser-Kompatibilität

Als Nächstes

Im nächsten Artikel dieses Moduls zeigen wir Ihnen, wie Sie Anpassbare Select-Listboxen stylen können.

Siehe auch

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker(select), ::picker-icon, ::checkmark
• :open, :checked

• Zurück
• Übersicht: Webformulare
• Weiter