Anpassenbare Select-Elemente

Hintergrund

Traditionell war es schwierig, das Aussehen und Verhalten von <select>-Elementen zu verändern, da sie interne Elemente enthalten, die auf Betriebssystemebene gestylt sind und nicht mit CSS anvisiert werden können. Dazu gehören das Dropdown-Auswahlfeld, Pfeilsymbol und so weiter.

Bisher war die beste verfügbare Option — abgesehen von der Verwendung einer benutzerdefinierten JavaScript-Bibliothek — das Setzen eines appearance-Werts von none auf das <select>-Element, um einige der OS-basierten Stile zu entfernen und dann CSS zu verwenden, um die Teile zu gestalten, die gestylt werden können. Diese Technik wird im Erweiterten Formular-Styling erklärt.

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

Zusätzlich bieten sie eine progressive Verbesserung der bestehenden Funktionalität, indem sie in nicht unterstützenden Browsern auf "klassische" Selects zurückgreifen.

Wie Sie dieses Beispiel erstellen, erfahren Sie in den folgenden Abschnitten.

Welche Features umfasst ein anpassbares Select?

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

• Gewöhnliche <select>, <option> und <optgroup>-Elemente. Diese funktionieren genauso wie in "klassischen" Selects, außer dass sie zusätzliche zulässige Inhaltsarten haben.
• Ein <button>-Element, das als erstes Kind innerhalb des <select>-Elements enthalten ist, was in "klassischen" Selects zuvor nicht erlaubt war. Wenn dies enthalten ist, ersetzt es das standardmäßige "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 das Dropdown-Auswahlfeld zu öffnen).

  Hinweis: Der Select-Button ist inert standardmäßig, sodass, wenn interaktive Kinder (zum Beispiel Links oder Schaltflächen) darin enthalten sind, er weiterhin wie eine einzelne Schaltfläche für Interaktionszwecke behandelt wird — beispielsweise werden die Kindelemente nicht fokussierbar oder klickbar.

• Das <selectedcontent>-Element kann optional im ersten Kind-<button>-Element des <select>-Elements enthalten sein, um den aktuell ausgewählten Wert im geschlossenen <select>-Element anzuzeigen. Dies enthält ein Klon des aktuell ausgewählten <option>-Inhalts (erstellt mit cloneNode() im Hintergrund).
• Das ::picker(select)-Pseudo-Element, das den gesamten Inhalt des Auswahlfeldes anvisiert. Dazu gehören alle Elemente innerhalb des <select>-Elements, außer das erste Kind <button>.
• Der appearance-Eigenschaftswert base-select, der das <select>-Element und das ::picker(select)-Pseudo-Element in die browserdefinierten Standardstile und -verhalten für anpassbare Selects überführt.
• Die :open-Pseudo-Klasse, die den Select-Button anvisiert, wenn das Auswahlfeld (::picker(select)) geöffnet ist.
• Das ::picker-icon-Pseudo-Element, das das Symbol im Select-Button anvisiert — den Pfeil, der nach unten zeigt, wenn das Select geschlossen ist.
• Die :checked-Pseudo-Klasse, die das aktuell ausgewählte <option>-Element anvisiert.
• Das ::checkmark-Pseudo-Element, das das Häkchen im derzeit ausgewählten <option>-Element anvisiert, um visuell anzuzeigen, welches ausgewählt ist.

Zusätzlich haben das <select>-Element und sein Dropdown-Auswahlfeld eine implizite Ankerreferenz, was bedeutet, dass das Auswahlfeld automatisch mit dem <select>-Element über CSS-Anchor-Positionierung verknüpft ist. Die browserdefinierten Standardstile positionieren das Auswahlfeld relativ zum Button (dem Anker) und Sie können diese Position anpassen, wie in Elemente relativ zu ihrem Anker positionieren erklärt. Die browserdefinierten Standardstile definieren auch einige Position-Try-Backups, die das Auswahlfeld neu positionieren, wenn es droht, den Viewport zu überlaufen. Position Try-Backups sind erklärt in Umgang mit Überlauf: Try-Backups und bedingtes Verstecken.

Schauen wir uns alle oben genannten Features in Aktion an, indem wir das Beispiel durchgehen, das oben auf der Seite gezeigt wird.

Anpassenbare Select-Markup

Unser Beispiel ist ein typisches <select>-Menü, das es Ihnen ermöglicht, ein Haustier auszuwählen. Der Markup ist wie folgt:

<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>

Der Beispiel-Markup ist fast derselbe wie der "klassische" <select>-Markup, mit den folgenden Unterschieden:

• Die <button><selectedcontent></selectedcontent></button> Struktur repräsentiert den Select <button>. Das Hinzufügen des <selectedcontent>-Elements veranlasst den Browser dazu, den aktuell ausgewählten <option> innerhalb des Buttons zu klonen, den Sie dann mit benutzerdefinierten Stilen versehen können. Wenn diese Struktur nicht in Ihrem Markup enthalten ist, wird der Browser auf die Darstellung des ausgewählten Textes der Option innerhalb des Standardbuttons zurückgreifen, und Sie können es nicht so einfach stylen.

  Hinweis: Sie können beliebige Inhalte innerhalb des <button> einfügen, um was auch immer Sie möchten im geschlossenen <select> anzuzeigen, aber seien Sie vorsichtig dabei. Was Sie einfügen, kann den zugänglichen Wert, der für unterstützende Technologien freigelegt wird, für das <select>-Element verändern.

• Der Rest des <select>-Inhalts stellt das Dropdown-Auswahlfeld dar, das normalerweise auf die <option>-Elemente begrenzt ist, die die verschiedenen Auswahlmöglichkeiten im Auswahlfeld darstellen. Sie können auch andere Inhalte im Auswahlfeld einfügen, aber es wird nicht empfohlen.

• Traditionell konnten <option>-Elemente nur Text enthalten, aber in einem anpassbaren Select können Sie 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 nutzen, um zusätzlichen Inhalt einzufügen, obwohl zu beachten ist, dass dieser nicht im abschickbaren Wert enthalten sein würde. In unserem Beispiel enthält jede <option> zwei <span>-Elemente, die jeweils ein Icon und ein Textlabel enthalten, sodass jedes Element unabhängig gestaltet und positioniert werden kann.

  Hinweis: Da der <option>-Inhalt mehrschichtige DOM-Unterbäume enthalten kann, nicht nur Textknoten, gibt es Regeln, wie der Browser den aktuellen <select>-Wert via JavaScript extrahieren sollte. Der textContent-Eigenschaftswert des ausgewählten <option>-Elements wird abgerufen, trim() darauf ausgeführt, und das Ergebnis als <select> Wert gesetzt.

Dieses Design ermöglicht es nicht unterstützenden Browsern, auf eine klassische <select>-Erfahrung zurückzugreifen. Die <button><selectedcontent></selectedcontent></button>-Struktur wird komplett ignoriert, und der nicht-textbasierte <option>-Inhalt wird entfernt, sodass nur der Text-Inhalt übrig bleibt, das Ergebnis bleibt jedoch funktional.

Einschalten der benutzerdefinierten Select-Darstellung

Um sich für die benutzerdefinierte Select-Funktionalität und minimale Browser-Basisstile zu entscheiden (und die OS-bereitgestellten Stile zu entfernen), müssen sowohl Ihr <select>-Element als auch dessen Dropdown-Auswahlfeld (dargestellt durch das ::picker(select)-Pseudoelement) 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 in die neue Funktionalität einzubinden und das Auswahlfeld mit dem standardmäßigen OS-Styling zu belassen, aber in den meisten Fällen möchten Sie beide einbinden. Sie können nicht nur das Auswahlfeld ohne das <select>-Element einbinden.

Sobald das getan ist, ergibt sich eine sehr schlichte Darstellung eines <select>-Elements:

Jetzt sind Sie frei, dies in jeder gewünschten Weise zu gestalten. Zu Beginn hat das <select>-Element benutzerdefinierte border, background (das bei :hover oder :focus geändert wird), und padding-Werte gesetzt, plus eine transition, sodass die Hintergrundveränderung reibungslos animiert wird:

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

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

Styling des Auswahlpfeils

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

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

Als Nächstes wird ::picker-icon mit der :open-Pseudo-Klasse kombiniert — die den Select-Button nur dann anvisiert, wenn das Dropdown-Auswahlfeld geöffnet ist — um dem Icon einen rotate-Wert von 180deg zu geben, wenn das <select> geöffnet ist.

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

Werfen wir einen Blick auf die bisherige Arbeit — beachten Sie, wie der Auswahlpfeil sich reibungslos um 180 Grad dreht, wenn das <select> geöffnet und geschlossen wird:

Styling des Dropdown-Auswahlfeldes

Das Dropdown-Auswahlfeld kann mit dem ::picker(select)-Pseudo-Element anvisiert werden. Wie bereits erwähnt, enthält das Auswahlfeld alles im <select>-Element, das nicht der Button und das <selectedcontent> ist. In unserem Beispiel bedeutet dies alle <option>-Elemente und deren Inhalt.

Das Auswahlfeld ist ein popover. Daher werden beim Öffnen des Auswahlfeldes seine Inhalte (enthalten im ::picker(select)-Pseudo-Element) in die Top-Ebene befördert. Dies stellt sicher, dass das Auswahlfeld über anderen Elementen angezeigt wird und sich reibungslos mit anderen Popovers auf der Seite verbindet (z. B. das Schließen nicht zusammenhängender Popovers, die bereits geöffnet sind).

In unserem Beispiel beginnen wir damit, den Standard-Schwarzborder-Rand des Auswahlfeldes zu entfernen:

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

Nun werden die <option>-Elemente gestylt. Sie werden mit flexbox angeordnet, richten sie alle zum Start des Flex-Containers aus und geben einen 20px gap zwischen jedem. Jede <option> erhält auch den gleichen border, background, padding, und transition wie das <select>, um ein einheitliches Erscheinungsbild zu schaffen:

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

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

Als Nächstes wird eine Kombination aus den :first-of-type, :last-of-type, und :not()-Pseudo-Klassen verwendet, um eine geeignete border-radius für das oberste und unterste <option>-Element festzulegen und den border-bottom von allen <option>-Elementen zu entfernen — außer dem letzten, um ein unordentliches und doppeltes Aussehen der Ränder zu vermeiden. Wir setzen auch den gleichen border-radius auf das äußere ::picker(select)-Container-Element, damit wir keine hässliche eckige weiße Box um die Optionen erhalten, wenn wir eine andere Hintergrundfarbe auf der Seite festlegen.

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;
}

Dann wird eine andere background-Farbe auf die ungeraden <option>-Elemente mit :nth-of-type(odd) gesetzt, um eine Zebra-Streifung zu implementieren, und eine andere background-Farbe wird auf die <option>-Elemente gesetzt, wenn sie im Fokus sind oder angeklickt werden, um ein nützliches visuelles Highlight während der Auswahl zu bieten:

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

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

Abschließend wird für diesen Abschnitt eine größere font-size auf den <option>-Icons gesetzt (enthalten in <span>-Elementen mit der Klasse icon), um sie zu vergrößern, und die text-box-Eigenschaft wird verwendet, um einige der störenden Abstände an den blockstartenden und blockendenden Enden der Icon-Emojis zu entfernen, sodass sie besser mit den Textlabels ausgerichtet sind:

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

Unser Beispiel rendert jetzt wie folgt:

Anpassen des Stylings der ausgewählten Option im Select-Button

Wenn Sie eine beliebige Haustier-Option aus den letzten Live-Beispielen auswählen, werden Sie ein Problem bemerken — die Haustier-Icons führen dazu, dass der Select-Button an Höhe zunimmt, was auch die Position des Auswahlfeld-Icons verändert, und es gibt keinen Abstand zwischen Icon und Label der Option.

Dies kann behoben werden, indem das Icon ausgeblendet wird, wenn es im <selectedcontent> enthalten ist, das den Inhalt der ausgewählten <option> darstellt, wie er im Select-Button erscheint. In unserem Beispiel wird es mit display: none ausgeblendet:

selectedcontent .icon {
  display: none;
}

Dies hat keinen Einfluss auf das Styling der <option>-Inhalte, wie sie im Dropdown-Auswahlfeld erscheinen.

Styling der aktuell ausgewählten Option

Um das aktuell ausgewählte <option>-Element zu stylen, wie es im Dropdown-Auswahlfeld erscheint, können Sie es mit der :checked-Pseudo-Klasse anvisieren. Dies wird verwendet, um die font-weight des ausgewählten <option>-Elements auf bold zu setzen:

option:checked {
  font-weight: bold;
}

Styling des aktuellen Auswahlsymbols

Sie haben wahrscheinlich bemerkt, dass, wenn Sie das Auswahlfeld öffnen, um eine Auswahl zu treffen, das aktuell ausgewählte <option> ein Häkchen an seinem Inline-Startende hat. Dieses Häkchen kann mit dem ::checkmark-Pseudo-Element angesteuert werden. Beispielsweise möchten Sie dieses Häkchen vielleicht ausblenden (zum Beispiel über display: none).

Sie könnten sich jedoch auch entscheiden, etwas Interessanteres damit anzufangen — frühere <option>-Elemente wurden horizontal mit Flexbox angeordnet, wobei die Flexelemente an den Beginn der Zeile ausgerichtet wurden. In der untenstehenden Regel wird das Häkchen vom Beginn der Zeile zum Ende verschoben, indem ein order-Wert gesetzt wird, der größer als 0 ist, und es mit einem auto-margin-left-Wert an das Ende der Zeile ausgerichtet wird (siehe Ausrichtung und Automargen).

Abschließend 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 noch einmal an, wie das Beispiel rendert. Der aktualisierte Zustand nach den letzten drei Abschnitten sieht wie folgt aus:

Animation des Auswahlfeldes mithilfe von Popover-Zuständen

Der anpassbare <select>-Element-Select-button und das Dropdown-Auswahlfeld erhalten automatisch eine Invoker/Popover-Beziehung, wie in Verwenden der Popover-API beschrieben. Dies bringt viele Vorteile für <select>-Elemente mit sich; unser Beispiel nutzt die Möglichkeit, zwischen verborgenen und sichtbaren Popover-Zuständen mithilfe von Übergängen zu animieren. Die :open-Pseudo-Klasse repräsentiert geöffnete Select-Elemente.

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

Zuallererst wird das Auswahlfeld mit ::picker(select) ausgewählt und ein opacity-Wert von 0 sowie ein transition-Wert von all 0.4s allow-discrete gegeben. Dies bewirkt, dass alle Eigenschaften, deren Wert sich ändert, wenn der Popover-Zustand von verborgen zu sichtbar wechselt, animiert werden.

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

Die Liste der übergangenen Eigenschaften beinhaltet opacity, umfasst jedoch auch zwei diskrete Eigenschaften, deren Werte von den Standard-Browserstilen gesetzt werden:

display

Der display-Wert wechselt von none zu block, wenn der Popover-Zustand von verborgen zu sichtbar 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 verborgen zu sichtbar wechselt, um es in die obere Ebene zu fördern, und dann wieder zurück, wenn es verborgen wird, um es zu entfernen. Dies muss animiert werden, um sicherzustellen, dass die Entfernung des Popovers aus der oberen Ebene aufgeschoben wird, bis der Übergang abgeschlossen ist, um den Übergang sichtbar zu machen.

Als Nächstes wird das Auswahlfeld im sichtbaren Zustand mithilfe von :open::picker(select) ausgewählt und ein opacity-Wert von 1 gegeben — dies ist der Endzustand des Übergangs:

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

Schließlich muss, da das Auswahlfeld beim Übergang zwischen display: none zu einem display-Wert, der es sichtbar macht, übergeht, der Anfangszustand des Übergangs innerhalb eines @starting-style-Blocks angegeben werden:

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

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

Positionieren des Auswahlfeldes mit Anker-Positionierung

Ein anpassbares <select>-Element, das aus einem Select-Button und einem Dropdown-Auswahlfeld besteht, hat eine implizite Ankerreferenz, und das Auswahlfeld ist automatisch mit dem Select-Button über CSS-Anker-Positionierung verknüpft. Das bedeutet, dass keine explizite Zuordnung mithilfe der anchor-name- und position-anchor-Eigenschaften erforderlich ist.

Zusätzlich stellen die Standard-Browserstile eine Standardposition bereit, die Sie anpassen können, wie in Positionieren von Elementen relativ zu ihrem Anker erklärt.

In unserem Demo wird die Position des Auswahlfeldes relativ zu seinem Anker festgelegt, 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 Auswahlfeldes immer 1 Pixel unterhalb der unteren Kante des Select-Buttons positioniert ist und die linke Kante des Auswahlfeldes immer 10% der Breite des Select-Buttons von seiner linken Kante entfernt positioniert ist.

Hauptergebnis des Beispielendes

Nach den letzten beiden Abschnitten wird der final aktualisierte Zustand unseres <select> wie folgt gerendert:

Styling von Optgroup-Elementen

Das Standardstyling von <optgroup>-Elementen in anpassbaren Selects ist dasselbe wie in klassischen <select>-Elementen — fettgedruckt und weniger eingezogen als die enthaltenen Optionen. In anpassbaren Selects verhalten sich Optionsgruppen jedoch genauso wie andere Block-Level-Container und können entsprechend gestylt werden. Zusätzlich ist das <legend>-Element als Kind von <optgroup> erlaubt, um ein leicht anzusteuerendes und zu stylendes Label bereitzustellen. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements gesetzt ist, und hat dieselbe Semantik.

Schauen wir uns ein einfaches 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 meist rudimentäre Stile, um die Optionsgruppen-Elemente wie Container für ihre nachfolgenden <option>-Elemente aussehen zu lassen. Wir haben ihnen einige margin-top gegeben, um ein wenig Abstand zwischen jeder Optionsgruppe und zwischen der obersten Optionsgruppe und dem Select-Button zu schaffen.

* {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

Abschließend stylen wir die <option>-Elemente, geben ihnen eine background-Farbe, etwas padding und stylen die untere border-radius des letzten <option> in jedem Fall, um es den abgerundeten Ecken des übergeordneten <optgroup> anzupassen. Wir implementieren auch eine Zebra-Streifung, indem wir den ungeraden Optionen eine andere Hintergrundfarbe geben und einen deutlich unterscheidbaren Hover- und Fokuseffekt auf die Optionen setzen.

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

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

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

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

Wir haben die restlichen Stile aus Gründen der Kürze ausgeblendet.

Das Beispiel wird wie folgt gerendert:

@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

Im Folgenden

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