Formularsteuerelemente gestalten

In diesem Modul erfahren Sie, wie Sie Formularsteuerelemente gestalten und wie Sie andere Websitestile anpassen.

Nutzern bei der Auswahl einer Option helfen

Das <select>-Element

Die Standardstile eines <select>-Elements sehen nicht gut aus und die Darstellung ist in den Browsern unterschiedlich.

Ändern wir zuerst die Pfeile. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Um die Standardpfeile eines <select>-Elements zu entfernen, verwenden Sie die CSS-Eigenschaft appearance. Definieren Sie den Pfeil als background, um den Pfeil Ihrer Wahl anzuzeigen.

Außerdem sollten Sie font-size für das <select>-Element auf mindestens 1rem ändern. Dieser Wert hat in den meisten Browsern einen Standardwert von 16 Pixel. Dadurch wird in iOS Safari das Zoomen von Seiten verhindert, wenn das Formularsteuerelement im Fokus ist.

Natürlich können Sie auch die Elementfarben ändern, damit sie zu den Farben Ihrer Marke passen. Nachdem weitere Stile für Abstände, :hover und :focus hinzugefügt wurden, ist das Erscheinungsbild des <select>-Elements in allen Browsern einheitlich.

Sehen Sie sich dazu die folgende Demo von Styling a Select Like It’s 2019 an.

Was ist mit dem <option>-Element? Das <option>-Element ist ein sogenanntes ersetztes Element, dessen Darstellung außerhalb des Bereichs von CSS liegt. Zum jetzigen Zeitpunkt können Sie das <option>-Element nicht mehr gestalten.

Kästchen und Optionsfelder

Das Aussehen von <input type="checkbox"> und <input type="radio"> variiert je nach Browser.

Öffne die Demo in verschiedenen Browsern, um den Unterschied zu sehen. Sehen wir uns an, wie Sie dafür sorgen, dass Kontrollkästchen und Optionsfelder zu Ihrer Marke passen und browserübergreifend identisch sind.

Bisher konnten <input type="checkbox">- und <input type="radio">-Steuerelemente nicht direkt angepasst werden. Kästchen und Optionsfelder können jetzt über ihre Pseudoelemente gestaltet werden. Sie können auch die folgende Ersetzungsmethode verwenden, um benutzerdefinierte Stile für diese Elemente zu erstellen.

Blenden Sie zuerst das Standardkästchen und das Optionsfeld aus.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Es ist wichtig, position: absolute in Kombination mit opacity: 0 anstelle von display: none oder visibility: hidden zu verwenden, damit die Steuerelemente nur visuell ausgeblendet werden. Dadurch werden sie weiterhin in der Hierarchie der Barrierefreiheit des Browsers angezeigt. Möglicherweise sind weitere Stile erforderlich, damit die visuell ausgeblendeten Formularsteuerelemente „über“ den Ersatzelementen bleiben. Wenn Sie den Mauszeiger auf eines dieser Elemente bewegen, ein Screenreader eingeschaltet ist oder Touch-Geräte mit aktiviertem Screenreader verwenden, sind die visuell ausgeblendeten Steuerelemente sichtbar, wenn Sie den Mauszeiger über eines dieser Elemente bewegen. Die sichtbare Fokusanzeige des Screenreaders erscheint im Allgemeinen an der Stelle, an der die Steuerelemente auf dem Bildschirm gerendert werden.

Zum Anzeigen Ihrer benutzerdefinierten Kontrollkästchen und Optionsfelder gibt es verschiedene Optionen. Sie können das CSS-Pseudoelement ::before und die CSS-Eigenschaft background oder SVG-Inline-Bilder verwenden. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

Mit CSS haben Sie zahlreiche Möglichkeiten, um sicherzustellen, dass Kontrollkästchen und Optionsfelder Ihren Markenstilen entsprechen.

Weitere Informationen zum Stil von <input type="checkbox"> und <input type="radio"> sowie zu benutzerdefinierten Kästchenstile

So verwenden Sie die Farben Ihrer Website für Steuerelemente für Formulare

Möchten Sie Ihre Websitestile mit einer einzigen Codezeile in Formularsteuerelemente einbinden? Dazu können Sie die CSS-Eigenschaft accent-color verwenden.

checkbox {
  accent-color: orange;
}

Wissen testen

Testen Sie Ihr Wissen über die Gestaltung von Formularsteuerelementen

Wie lässt sich die plattformnative Gestaltung von Formularsteuerelementen entfernen?

revert: all; wird verwendet.
Versuch es noch einmal.
appearance: none; wird verwendet.
🎉
appearance: revert; wird verwendet.
Versuch es noch einmal.
revert: appearance; wird verwendet.
Versuch es noch einmal.

Ressourcen