2 Reaktionen

Firefox 53: Radio-Buttons und Checkboxen können per CSS gestaltet werden

Geschätzte Lesedauer:

Es gibt HTML-Elemente, diese sind von Natur aus schwierig bis gar nicht auf gewöhnlichem Weg per CSS zu gestalten. Dies trifft unter anderem auf Radio-Buttons und Checkboxen zu. Ab Firefox 53 erweitern sich hier die Möglichkeiten für Webentwickler.

Webentwickler, welche versuchen, Einfluss auf die Gestaltung von Radio-Buttons oder Checkboxen per CSS zu nehmen, werden bisher weitestgehend enttäuscht, denn einfache Dinge wie die Hintergrund- oder Rahmenfarbe oder auch die Festlegung einer Grafik lassen sich nicht ohne Weiteres bewerkstelligen. Dies ändert sich ab Firefox 53. Damit eröffnen sich neue Möglichkeiten für die Gestaltung, ohne dass dazu Tricks notwendig wären.

Wichtig bei der Gestaltung von Radio-Buttons oder Checkboxen per CSS ist die gleichzeitige Verwendung von -moz-appearance: none; respektive -webkit-appearance: none; für Kompatibilität mit Chrome, Safari sowie Microsoft Edge (Microsoft unterstützt dies in Edge, ohne ein vergleichbares -ms-appearance implementiert zu haben.

Radio-Button- und Checkbox-Gestaltung per CSS in Firefox 53

Update
Verschoben auf Firefox 54.
Dieser Artikel wurde von Sören Hentzschel verfasst.

Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, mozilla.de, firefoxosdevices.org sowie sozone.de.

2 Kommentare - bis jetzt!

Eigenen Kommentar verfassen
  1. Florian
    schrieb am :

    Haben beide Radio-Buttons in Firefox 53 den Selben Zustand, oder ist einer ausgewählt wie im Firefox 52 Beispiel? Ich sehe keinen Unterschied. -> Usability kann schnell unter dem Design leiden wenn man's zu bunt treibt..

  2. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Das ist ja auch nur ein Beispiel zur Demonstration. In dem Beispiel gibt es keinen Unterschied zwischen beiden Zuständen, in der Praxis würde man das natürlich unterschiedlich machen.

Und jetzt du! Deine Meinung?

Erforderliche Felder sind mit einem Asterisk (*) gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.
  1. Nach Absenden des Kommentar-Formulars erfolgt eine Verarbeitung der von Ihnen eingegebenen personenbezogenen Daten durch den datenschutzrechtlich Verantwortlichen zum Zweck der Bearbeitung Ihrer Anfrage auf Grundlage Ihrer durch das Absenden des Formulars erteilten Einwilligung.
    Weitere Informationen