Anpassbare select-Elemente

Hintergrund

Traditionell war es schwierig, das Aussehen und das Verhalten von <select>-Elementen anzupassen, da sie interne Strukturen enthalten, die auf Betriebssystemebene gestaltet sind und nicht mit CSS angesteuert werden können. Dazu gehören der Dropdown-Auswähler, das Pfeilsymbol und so weiter.

Bisher war die beste verfügbare Option — abgesehen von der Verwendung einer benutzerdefinierten JavaScript-Bibliothek — den appearance-Wert none auf das <select>-Element anzuwenden, um einen Teil der auf Betriebssystemebene vorhandenen Gestaltung zu entfernen, und dann CSS zu verwenden, um die Teile anzupassen, die gestylt werden können. Diese Technik wird im Erweitertes Formularstyling erklärt.

Anpassbare <select>-Elemente bieten eine Lösung für diese Probleme. Sie ermöglichen es, Beispiele wie das folgende nur mit HTML und CSS zu erstellen, die vollständig in unterstützten Browsern angepasst sind. Dies umfasst <select>- und Dropdown-Auswähler-Layout, Farbschema, Icons, Schriftart, Übergänge, Positionierung, Marker zur Anzeige des ausgewählten Symbols und mehr.

Darüber hinaus bieten sie eine progressive Verbesserung gegenüber der bestehenden Funktionalität und fallen in nicht unterstützten Browserversionen auf „klassische“ Auswahlelemente zurück.

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

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 genauso wie in „klassischen“ selects, außer dass sie zusätzliche zulässige Inhaltstypen haben.
• Ein <button>-Element, das als erstes Kind innerhalb des <select>-Elements enthalten ist, was zuvor in „klassischen“ selects nicht erlaubt war. Wenn dies enthalten ist, ersetzt es die standardmäßige „Schaltfläche“-Darstellung des geschlossenen <select>-Elements. Dies wird allgemein als Select-Schaltfläche bezeichnet (da es die Schaltfläche ist, die Sie drücken müssen, um den Dropdown-Auswähler zu öffnen).

  Hinweis: Die Select-Schaltfläche ist standardmäßig inert, sodass sie, auch wenn interaktive Kinder (z.B. Links oder Schaltflächen) enthalten sind, weiterhin als eine einzelne Schaltfläche für Interaktionszwecke behandelt wird — beispielsweise sind die Kind-Elemente weder fokussierbar noch anklickbar.

• Das <selectedcontent>-Element kann optional innerhalb des ersten Kind-<button>-Elements des <select>-Elements enthalten sein, um den derzeit ausgewählten Wert im geschlossenen <select>-Element anzuzeigen. Dies enthält ein Klon des Inhalts des aktuellen <option>-Elements (erstellt mit cloneNode() unter der Haube).
• Das ::picker(select)-Pseudoelement, das den gesamten Inhalt des Pickers ansteuert. Dies schließt alle Elemente innerhalb des <select>-Elements ein, außer dem ersten Kind-<button>.
• Der appearance-Eigenschaftswert base-select, der das <select>-Element und das ::picker(select)-Pseudoelement in die vom Browser definierten Standardstile und das Verhalten für anpassbare Selects einbindet.
• Die :open-Pseudoklasse, die die Select-Schaltfläche ansteuert, wenn der Picker (::picker(select)) offen ist.
• Das ::picker-icon-Pseudoelement, das das Symbol innerhalb der Select-Schaltfläche ansteuert — den Pfeil, der nach unten zeigt, wenn das Select geschlossen ist.
• Die :checked-Pseudoklasse, die das derzeit ausgewählte <option>-Element ansteuert.
• Das ::checkmark-Pseudoelement, das das Häkchen ansteuert, das im derzeit ausgewählten <option>-Element platziert ist, um einen visuellen Hinweis darauf zu geben, welche Option ausgewählt ist.

Darüber hinaus hat das <select>-Element und sein Dropdown-Auswähler eine implizite Ankerreferenz, was bedeutet, dass der Picker automatisch dem <select>-Element über CSS-Anker-Positionierung zugeordnet ist. Die Browser-Standardstile positionieren den Picker relativ zur Schaltfläche (dem Anker) und Sie können diese Position anpassen, wie im Abschnitt Positionierung von Elementen relativ zu ihrem Anker erklärt. Die Browser-Standardstile definieren auch einige Fallbacks bei Positionsversuchen, die den Picker neu positionieren, wenn er Gefahr läuft, den Viewport zu überlaufen. Fallbacks bei Positionsversuchen werden im Abschnitt Umgang mit Überlauf: Versuche, Fallbacks und bedingtes Verstecken erklärt.

Lassen Sie uns alle oben genannten Funktionen in Aktion sehen, indem wir das oben auf der Seite gezeigte Beispiel durchgehen.

Markup für anpassbare selects

Unser Beispiel ist ein typisches <select>-Menü, mit dem Sie ein Haustier auswählen können. Das Markup sieht wie folgt 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 unterscheidet sich fast nicht von klassischem <select>-Markup, mit den folgenden Unterschieden:

• Die Struktur <button><selectedcontent></selectedcontent></button> repräsentiert die Select-<button>. Das Hinzufügen des <selectedcontent>-Elements bewirkt, dass der Browser das derzeit ausgewählte <option>-Element innerhalb der Schaltfläche klont, das Sie dann mit benutzerdefinierten Stilen versehen können. Wenn diese Struktur nicht in Ihrem Markup enthalten ist, fällt der Browser darauf zurück, den Text der ausgewählten Option innerhalb der Standardschaltfläche darzustellen, und Sie können ihn nicht so einfach gestalten.

  Hinweis: Sie können beliebige Inhalte in der <button> hinzufügen, um was auch immer Sie im geschlossenen <select> rendern möchten, aber seien Sie vorsichtig, wenn Sie dies tun. Was Sie hinzufügen, kann den zugänglichen Wert für das <select>-Element, der unterstützender Technologie ausgesetzt ist, ändern.

• Der Rest der <select>-Inhalte repräsentiert den Dropdown-Auswähler, der in der Regel auf die <option>-Elemente beschränkt ist, die die verschiedenen Auswahlen im Auswähler darstellen. Sie können andere Inhalte im Auswähler einfügen, aber dies 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 textuelle semantische Elemente und mehr einfügen. Sie können sogar die ::before- und ::after-Pseudoelemente verwenden, um andere Inhalte hinzuzufügen, auch wenn Sie bedenken sollten, dass dies nicht im absendbaren Wert enthalten wäre. In unserem Beispiel enthält jede <option> zwei <span>-Elemente, die jeweils ein Symbol und ein Textlabel enthalten, was es ermöglicht, jedes unabhängig zu gestalten und zu positionieren.

  Hinweis: Da der <option>-Inhalt mehrstufige DOM-Strukturen, nicht nur Textknoten beinhalten kann, gibt es Regeln dazu, wie der Browser über JavaScript den aktuellen <select>-Wert extrahieren sollte. Der textContent-Eigenschaftswert des ausgewählten <option>-Elements wird abgerufen, trim() wird darauf angewendet, und das Ergebnis wird als <select>-Wert festgelegt.

Dieses Design ermöglicht es nicht unterstützten Browsern auf eine klassische <select>-Erfahrung zurückzufallen. Die Struktur <button><selectedcontent></selectedcontent></button> wird vollständig ignoriert, und die nicht-textlichen <option>-Inhalte werden herausgefiltert, sodass nur die Textknoten-Inhalte verbleiben, aber das Ergebnis wird weiterhin funktionieren.

Opt-in für die Anpassung der select-Rendering

Um sich in die angepasste select-Funktionalität und die minimalen Browser-Grundlagenstile (und die vom Betriebssystem bereitgestellten Stile zu entfernen) einzubinden, müssen sowohl Ihr <select>-Element als auch sein Dropdown-Auswähler (repräsentiert durch das ::picker(select)-Pseudoelement) einen appearance-Wert von base-select aufweisen:

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 sich dafür entscheiden, nur das <select>-Element in die neue Funktionalität einzubinden, während der Picker die Standard-Betriebssystemstile beibehält, aber in den meisten Fällen möchten Sie beide einbinden. Sie können den Picker nicht einbinden, ohne das <select>-Element einzubinden.

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

Sie sind nun frei, dies nach Belieben zu gestalten. Zu Beginn hat das <select>-Element benutzerdefinierte border, background (welches sich bei :hover oder :focus ändert) und padding-Werte eingestellt, plus 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;
}

Das Picker-Icon gestalten

Um das Symbol innerhalb der Select-Schaltfläche zu gestalten — den Pfeil, der nach unten zeigt, wenn das Select geschlossen ist — können Sie es mit dem ::picker-icon-Pseudoelement ansteuern. Der folgende Code verleiht dem Symbol eine benutzerdefinierte color und eine transition, damit Änderungen seines rotate-Eigenschaftswertes sanft animieren:

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

Als Nächstes wird ::picker-icon mit der :open-Pseudoklasse kombiniert — die die Select-Schaltfläche nur dann ansteuert, wenn der Dropdown-Auswähler geöffnet ist — um dem Symbol einen rotate Wert von 180deg zu geben, wenn das <select> geöffnet wird.

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

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

Den Dropdown-Auswähler gestalten

Der Dropdown-Auswähler kann mit dem ::picker(select)-Pseudoelement angesteuert werden. Wie bereits erwähnt, enthält der Picker alles innerhalb des <select>-Elements, das nicht die Schaltfläche und der <selectedcontent> ist. In unserem Beispiel bedeutet dies alle <option>-Elemente und deren Inhalt.

Zunächst wird der Standard-schwarze border des Pickers entfernt:

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

Jetzt werden die <option>-Elemente gestaltet. Sie sind mit flexbox gestaltet, wobei sie alle am Anfang des Flex-Containers ausgerichtet sind und ein 20px gap zwischen jedem gibt. Jedes <option> erhält außerdem dieselben border, background, padding und transition wie das <select>, um ein konsistentes Erscheinungsbild und Ansprechverhalten zu bieten:

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 der :first-of-type, :last-of-type und :not()-Pseudoklassen verwendet, um eine geeignete border-radius an den oberen und unteren <option>-Elementen zu setzen und die border-bottom von allen <option>-Elementen zu entfernen — außer dem letzten, damit die Ränder nicht unordentlich und doppelt aussehen. Wir setzen auch die gleiche border-radius auf den äußeren ::picker(select)-Container, damit wir nicht am Ende eine hässliche, quadratische weiße Box um die Optionen herum haben, falls wir entscheiden, eine andere Hintergrundfarbe auf der Seite zu verwenden.

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 den ungeraden <option>-Elementen mit :nth-of-type(odd) gesetzt, um ein Zebra-Putzmotiv zu implementieren, und eine andere background-Farbe wird auf den <option>-Elementen bei Fokus und Hover gesetzt, um während der Auswahl einen nützlichen visuellen Hinweis zu bieten:

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

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

Abschließend wird in diesem Abschnitt eine größere font-size auf die <option>-Symbole (enthalten innerhalb der <span>-Elemente mit einer Klasse von icon) gesetzt, um sie größer zu machen, und die text-box-Eigenschaft wird verwendet, um einige der nervigen Abstände an den Block-Anfangs- und Block-Endkanten der Icon-Emojis zu entfernen, damit sie besser mit den Textlabels ausgerichtet werden:

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

Unser Beispiel wird nun so gerendert:

Anpassen der Gestaltung des ausgewählten Option-Inhalts innerhalb der Select-Schaltfläche

Wenn Sie eine beliebige Haustieroption aus den letzten Live-Beispielen auswählen, werden Sie ein Problem bemerken — die Haustier-Icons verursachen, dass sich die Höhe der Select-Schaltfläche vergrößert, was auch die Position des Picker-Icons ändert, und es gibt keinen Abstand zwischen dem Optionssymbol und dem Label.

Dies kann behoben werden, indem das Symbol verborgen wird, wenn es innerhalb von <selectedcontent> enthalten ist, welches den Inhalt der ausgewählten <option> als sie innerhalb der Select-Schaltfläche erscheint, darstellt. In unserem Beispiel wird es mit display: none verborgen:

selectedcontent .icon {
  display: none;
}

Dies beeinträchtigt nicht die Gestaltung der <option>-Inhalte, wie sie im Dropdown-Auswähler erscheinen.

Gestaltung der aktuell ausgewählten Option

Um die aktuell ausgewählte <option> zu gestalten, wie sie im Dropdown-Auswähler erscheint, können Sie diese mit der :checked-Pseudoklasse ansteuern. Dies wird verwendet, um die font-weight des ausgewählten <option>-Elements auf bold zu setzen:

option:checked {
  font-weight: bold;
}

Gestaltung des aktuellen Auswahl-Häkchens

Sie haben wahrscheinlich bemerkt, dass wenn Sie den Auswähler öffnen, um eine Auswahl zu treffen, das aktuell ausgewählte <option> ein Häkchen am Inline-Anfangsende besitzt. Dieses Häkchen kann mit dem ::checkmark-Pseudoelement angesteuert werden. Zum Beispiel könnten Sie dieses Häkchen ausblenden (zum Beispiel mit display: none).

Sie könnten auch etwas Interessanteres damit machen — zuvor wurden die <option>-Elemente horizontal mit Flexbox gestaltet, wobei die Flex-Elemente am Anfang der Reihe ausgerichtet sind. In der untenstehenden Regel wird das Häkchen von der Reihenstartposition zur Reihenendposition verschoben, indem ein order-Wert darauf gesetzt wird, der größer als 0 ist, und es wird am Ende der Reihe mit einem auto-margin-left-Wert ausgerichtet (siehe Ausrichtung und Auto-Margen).

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: "☑️";
}

Lassen Sie uns erneut überprüfen, wie das Beispiel gerendert wird. Der aktualisierte Zustand nach den letzten drei Abschnitten ist wie folgt:

Den Picker mit Popover-Zuständen animieren

Die Select-Schaltfläche und der Dropdown-Auswähler eines anpassbaren <select>-Elements haben automatisch eine Invoker/Popover-Beziehung, wie im Abschnitt Verwendung der Popover-API beschrieben. Es gibt viele Vorteile, die dies für <select>-Elemente mit sich bringt; unser Beispiel nutzt die Möglichkeit, zwischen verdeckten und angezeigten Popover-Zuständen mit Übergängen zu animieren. Die :open-Pseudoklasse repräsentiert Select-Elemente in einem geöffneten Zustand.

Die Technik wird in diesem Abschnitt kurz behandelt — lesen Sie Popovers animieren für eine detailliertere Beschreibung.

Zuerst wird der Picker mit ::picker(select) ausgewählt und erhält eine opacity-Einstellung von 0 und einen transition-Wert von all 0.4s allow-discrete. Dies bewirkt, dass alle Eigenschaften, die beim Wechsel des Popover-Zustands von verdeckt zu sichtbar Wertänderungen erfahren, animieren.

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

Die Liste der übergangenen Eigenschaften umfasst opacity, jedoch auch zwei diskrete Eigenschaften, deren Werte durch die Browser-Standardstile festgelegt werden:

display

Der display-Wert wechselt von none zu block, wenn der Popover-Zustand von verdeckt zu gezeigt 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 verdeckt zu gezeigt wechselt, um ihn auf die oberste Schicht zu befördern, dann zurück zu none bei Überblendung. Dies muss animiert werden, um sicherzustellen, dass die Entfernung des Popovers von der obersten Schicht erst nach Abschluss des Übergangs erfolgt, um sicherzustellen, dass der Übergang sichtbar ist.

Als nächstes wird der Picker im gezeigten Zustand mit :open::picker(select) ausgewählt und erhält einen opacity-Wert von 1 — das ist der Endzustand des Übergangs:

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

Schließlich, da der Picker bei seiner Bewegung von display: none zu einem display-Wert, der ihn sichtbar macht, übergangsweise ist, muss der Startzustand des Übergangs in einem @starting-style-Block spezifiziert werden:

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

Diese Regeln arbeiten zusammen, um den Picker beim Öffnen und Schließen des <select> sanft einfaden und ausfaden zu lassen.

Den Picker mit Ankerpositionierung positionieren

Die Select-Schaltfläche und der Dropdown-Auswähler eines anpassbaren <select>-Elements haben eine implizite Ankerreferenz, und der Picker ist automatisch mit der Select-Schaltfläche durch CSS-Anker-Positionierung assoziiert. Dies bedeutet, dass keine explizite Assoziation mit den anchor-name und position-anchor-Eigenschaften erforderlich ist.

Darüber hinaus bieten die Standardstile des Browsers eine Standardposition, die Sie anpassen können, wie im Abschnitt Positionierung von Elementen relativ zu ihrem Anker erklärt.

In unserem Demo wird die Position des Pickers relativ zu seinem Anker festgelegt, indem die anchor()-Funktion in den top und left-Eigenschaften 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 unterhalb der unteren Kante der Select-Schaltfläche positioniert wird, und die linke Kante des Pickers immer 10% der Breite der Select-Schaltfläche von dessen linken Kante aus positioniert wird.

Hauptergebnis des endgültigen Beispiels

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

Styling von optgroup-Elementen

Die Standardgestaltung von <optgroup>-Elementen in anpassbaren Selects ist dieselbe wie in klassischen <select>-Elementen — fett gedruckt und weniger eingezogen als die enthaltenen Optionen. In anpassbaren Selects verhalten sich Optionsgruppen jedoch genau wie andere Blockcontainer und können entsprechend gestaltet werden. Zudem ist das <legend>-Element als Kind von <optgroup> erlaubt, um ein leicht anzuvisierendes und zu gestaltendes Label bereitzustellen. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements festgelegt ist und hat die gleiche Semantik.

Schauen wir uns ein einfaches Beispiel an. Unser HTML sieht wie folgt 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 unsere CSS durch das Styling der <optgroup>-Elemente selbst. Diese sind größtenteils rudimentäre Stile, um die Optgroup-Elemente wie Container für ihre nachfolgenden <option>-Elemente aussehen zu lassen. Wir haben ihnen etwas margin-top gegeben, um etwas Abstand zwischen jeder Optgroup zu schaffen und zwischen der obersten Optgroup und der Select-Schaltfläche.

* {
  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 gestalten 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 gestalten wir die <option>-Elemente, indem wir eine background-Farbe und etwas padding angeben und die untere border-radius des letzten <option> jeweils stylen, damit es mit den abgerundeten Ecken des Eltern-<optgroup> zusammenpasst. Wir implementieren auch Zebra-Streifen, indem wir den ungeraden <option>-Elementen eine andere Hintergrundfarbe geben, und einen unterschiedlichen Hover- und Fokus-Zustand für die Optionen bereitstellen.

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 den Rest der Stile aus Gründen der Kürze ausgeblendet.

Das Beispiel wird so 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

Als nächstes

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

Siehe auch

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

• Zurück
• Übersicht: Webformulare
• Weiter