Formularsteuerelemente gestalten

In diesem Modul lernen Sie, wie Sie Formularsteuerelemente und andere Stile Ihrer Website anpassen.

Nutzern bei der Auswahl einer Option helfen

Das <select>-Element

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

Ändern wir zunächst 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;
}

So entfernen Sie die Standardpfeile eines <select>-Elements: verwenden Sie die CSS-Eigenschaft appearance. Wenn der Pfeil Ihrer Wahl angezeigt werden soll, definieren Sie den Pfeil als background.

Sie sollten auch die font-size auf mindestens 1rem ändern (bei den meisten Browsern beträgt der Standardwert 16 px) für Ihr <select>-Element. Dadurch wird in iOS Safari ein Zoomen der Seite verhindert, wenn das Formularsteuerelement fokussiert ist.

Natürlich können Sie auch die Farben der Elemente an Ihre Markenfarben anpassen. Nachdem Sie weitere Stile für Abstände, :hover und :focus hinzugefügt haben, Das Aussehen des <select>-Elements ist jetzt in allen Browsern einheitlich.

Sehen Sie sich dazu die folgende Demo vom Styling a Select Like It’s 2019

Was ist mit dem <option>-Element? Das <option>-Element ist ein sogenanntes ersetztes Element, dessen Darstellung außerhalb des Gültigkeitsbereichs von CSS liegt. Zum Zeitpunkt der Veröffentlichung dieses Artikels können Sie das <option>-Element nicht mit einem Stil versehen.

Kästchen und Optionsfelder

Die Darstellung von <input type="checkbox"> und <input type="radio"> variiert je nach Browser.

Öffne die Demo mit verschiedenen Browsern, um den Unterschied zu sehen. Sehen wir uns an, wie Sie sicherstellen können, dass Kontrollkästchen und Optionsfelder zu Ihrer Marke passen und browserübergreifend gleich aussehen.

Bisher konnten Entwickler <input type="checkbox">- und <input type="radio">-Steuerelemente nicht direkt gestalten. Kästchen und Optionsfelder können ab sofort mithilfe ihrer Pseudoelemente gestaltet werden. Alternativ können Sie auch die folgende Ersetzungsmethode verwenden, um benutzerdefinierte Stile für diese Elemente zu erstellen.

Blenden Sie zunächst das Standardkästchen und das Optionsfeld visuell aus.

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

Es ist wichtig, position: absolute in Kombination mit opacity: 0 statt display: none oder visibility: hidden zu verwenden damit die Steuerelemente nur visuell verborgen sind. Dadurch wird sichergestellt, dass sie weiterhin vom Browser Baum für Barrierefreiheit im Internet. Unter Umständen sind weitere Stile erforderlich, damit die optisch ausgeblendeten Elemente bleiben die Formularsteuerelemente oben auf der Seite. ihrer Ersatzelemente. Dadurch wird sichergestellt, dass Sie mit der Maus werden die visuell ausgeblendeten Steuerelemente bei eingeschaltetem Screenreader oder bei Verwendung von Touch-Geräten mit aktivierten Screenreadern sichtbar sein. auf dem Bildschirm gerendert werden.

Sie haben verschiedene Möglichkeiten, Ihre benutzerdefinierten Kontrollkästchen und Optionsfelder anzuzeigen. 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;
}

Es gibt viele Möglichkeiten mit CSS, um sicherzustellen, dass Kontrollkästchen und Optionsfelder Ihrem Markenstil entsprechen.

Weitere Informationen über Stile für <input type="checkbox"> und <input type="radio"> und benutzerdefinierten Stilen für Kästchen.

Farben Ihrer Website für Formularsteuerelemente verwenden

Möchten Sie Ihre Website-Stile mit einer Codezeile in Formularsteuerelemente übertragen? Dazu können Sie die CSS-Property accent-color verwenden.

checkbox {
  accent-color: orange;
}

Wissen testen

Testen Sie Ihr Wissen über Stilsteuerelemente für Formulare

Ressourcen

• Akzentfarbe
• Stil für das Element <select> festlegen
• Bedienungshilfen für Steuerelemente für Formulare mit benutzerdefinierten Stilen
• UI öffnen