Stil Dropdown-Menü auswählen in CSS

Ein natives HTML-select-Dropdown lässt sich gestalten, indem Sie sein sichtbares Feld anpassen und den Standardpfeil durch einen mit CSS gezeichneten Pfeil ersetzen. Das Element bleibt ein echtes select, sodass die integrierte Auswahlfunktion und Tastaturbedienung erhalten bleiben. Zwei gängige Möglichkeiten sind, das native Erscheinungsbild direkt zu entfernen oder den nativen Pfeil mit einem umschließenden Element abzuschneiden.

Ein natives select-Dropdown gestalten und seine Funktion erhalten

Ein select enthält option-Elemente. Der Browser stellt das Steuerelement entsprechend den Konventionen des jeweiligen Browsers und der Plattform dar. CSS kann das sichtbare Feld verändern, doch die Aufklappliste und einige Details unterscheiden sich weiterhin je nach Browser und Betriebssystem. Wenn Sie die integrierte Formularfunktion und Tastaturbedienung nutzen möchten, behalten Sie das native Element bei, statt das Dropdown aus allgemeinen Elementen nachzubauen.

Die Beispiele verwenden dieselben vier Auswahlmöglichkeiten. Das CSS lässt rechts Platz für einen Pfeil und zeigt Tastaturbenutzern eine gut sichtbare Fokusumrandung. Passen Sie Farben und Abmessungen an Ihre Oberfläche an.

Den nativen Pfeil mit appearance: none ausblenden und einen eigenen Pfeil hinzufügen

Setzen Sie appearance: none auf dem select, um den nativen Pfeil des Browsers auszublenden, sofern dies unterstützt wird. Zeichnen Sie anschließend mit zwei CSS-Verläufen einen Winkel. Die Ebenen von background platzieren die beiden Linien nahe am rechten Rand; ein rechter Innenabstand hält den Text der Optionen davon fern. Die Deklarationen -webkit-appearance und -moz-appearance sind präfixierte Varianten für Engines, die diese Präfixe verwenden. Sie stehen nicht für getrennte WebKit- und Blink-Browserfamilien. Die standardisierte Eigenschaft ist die maßgebliche Deklaration. Behalten Sie Präfixe nur bei, wenn Ihre Anforderungen an die Browserunterstützung dies erfordern.

Diese vollständige Seite ist ein statisches Browserbeispiel. Speichern Sie sie als HTML-Datei und öffnen Sie sie in einem Browser, um das Steuerelement zu sehen. Das Paket enthält keine Nachweise einer Browserdarstellung, die ein bestimmtes visuelles Ergebnis belegen.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Styled select</title>
  <style>
    .vehicle-select {
      box-sizing: border-box;
      width: 220px;
      height: 40px;
      padding: 0 32px 0 10px;
      border: 1px solid #777;
      border-radius: 4px;
      color: #222;
      background-color: #fff;
      background-image:
        linear-gradient(45deg, transparent 50%, #333 50%),
        linear-gradient(135deg, #333 50%, transparent 50%);
      background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      appearance: none;
    }

    .vehicle-select:focus-visible {
      outline: 3px solid #1769aa;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <label for="vehicle">Choose a vehicle</label>
  <select class="vehicle-select" id="vehicle" name="vehicle">
    <option>RE Himalayan</option>
    <option selected>CRF Rally</option>
    <option>GS 310</option>
    <option>KTM ADV</option>
  </select>
</body>
</html>

Den nativen Pfeil mit einem abgeschnittenen Wrapper ausblenden

Ein Wrapper bietet eine weitere Möglichkeit, den nativen Pfeil auszublenden. Geben Sie dem select eine etwas größere Breite als dem Wrapper und setzen Sie overflow des Wrappers auf hidden. Dadurch liegt der native Pfeil außerhalb des sichtbaren Bereichs des Wrappers. Zeichnen Sie mit einem Pseudoelement auf dem Wrapper einen Ersatzpfeil. Da das select im Wrapper bleibt, stehen seine Auswahlmöglichkeiten und die native Bedienung weiterhin zur Verfügung.

Der Wrapper muss breit genug für den Text des Steuerelements sein; das select sollte nur geringfügig breiter sein. Ist der Unterschied zu groß, können auch der rechte Rand des Steuerelements oder andere Inhalte abgeschnitten werden. Das Pseudoelement verwendet pointer-events: none, damit es Klicks auf das select nicht abfängt.

Im Wrapper-Beispiel ragt das select 20 Pixel über den Wrapper hinaus. Diese kurze JavaScript-Prüfung hält das Größenverhältnis ausdrücklich fest:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const wrapperWidth = 200;
const selectWidth = 220;
if (selectWidth <= wrapperWidth) {
  process.exitCode = 1;
}

Die Prüfung ist erfolgreich, wenn das select breiter als der Wrapper ist. Andernfalls setzt sie einen Fehler-Exitcode.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select with clipped arrow</title>
  <style>
    .select-wrap {
      position: relative;
      box-sizing: border-box;
      width: 200px;
      height: 42px;
      overflow: hidden;
      border: 1px solid #777;
      border-radius: 4px;
      background: #fff;
    }

    .select-wrap select {
      box-sizing: border-box;
      width: 220px;
      height: 40px;
      padding: 0 10px;
      border: 0;
      color: #222;
      background: transparent;
      font: inherit;
    }

    .select-wrap::after {
      position: absolute;
      top: 18px;
      right: 12px;
      width: 7px;
      height: 7px;
      border-right: 2px solid #333;
      border-bottom: 2px solid #333;
      content: "";
      pointer-events: none;
      transform: rotate(45deg);
    }

    .select-wrap:focus-within {
      outline: 3px solid #1769aa;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <label for="vehicle">Choose a vehicle</label>
  <div class="select-wrap">
    <select id="vehicle" name="vehicle">
      <option>RE Himalayan</option>
      <option selected>CRF Rally</option>
      <option>GS 310</option>
      <option>KTM ADV</option>
    </select>
  </div>
</body>
</html>

Eine Methode wählen und ihre Grenzen prüfen

Verwenden Sie appearance: none, wenn Breite und Rand vom select selbst bestimmt werden sollen und Ihre Zielbrowser die benötigte Gestaltung unterstützen. Ein abgeschnittener Wrapper eignet sich, wenn der Pfeil auf Wrapper-Ebene liegen soll oder sich das native Erscheinungsbild nicht passend gestalten lässt. Testen Sie die Seite in jedem Fall in den Browsern und auf den Geräten, die Sie unterstützen: Die Darstellung nativer select-Elemente und ihrer Aufklappmenüs ist nicht überall gleich.

Prüfen Sie, ob der ausgewählte Wert vollständig sichtbar bleibt, der eigene Pfeil richtig ausgerichtet ist und der Tastaturfokus gut erkennbar ist. Vergleichen Sie bei der Wrapper-Variante die Breiten von Wrapper und select, wenn Rand oder Text abgeschnitten wirken. Entfernen Sie die Fokusmarkierung nicht bloß, damit das Steuerelement aufgeräumter aussieht. Wenn Sie sie anpassen, ersetzen Sie sie durch eine ebenso gut sichtbare Gestaltung. Diese Techniken ändern die Darstellung; Auswahl und Formularverhalten bleiben dem nativen select überlassen.