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
Wie können Sie die plattformnative Gestaltung von Formularsteuerelementen entfernen?
appearance: revert;
wird verwendet.revert: all;
wird verwendet.appearance: none;
wird verwendet.revert: appearance;
wird verwendet.