Web

Checkboxen und Radio Buttons mit SVG und CSS

SVG versus CSS – Styling-Check
Keine Kommentare

Mittels CSS (Cascading Style Sheets) und SVG (Scalable Vector Graphics) lassen sich unzählige verschiedene Text- und grafische Effekte im Web umsetzen. Im Folgenden werden die Vor- und Nachteile der beiden Grafikformate untersucht, um herauszufinden, ob sich mit CSS oder SVG leichter HTML-Formulare erzeugen lassen.

Welche Webtechnologie eignet sich nun am besten, um grafische Texteffekte im Web umzusetzen: SVG oder CSS? Bereits in einem anderen Artikel sind wir der Frage nachgegangen und haben uns auf den Bereich der grafischen Texteffekte beschränkt. Bei der Betrachtung der Vor- und Nachteile kamen wir gemeinsam mit Bloggerin Sara Soueidan zum Schluss, dass sich für diesen speziellen Fall SVGs besser eignen. Die Frontend-Entwicklerin befasst sich in einer Artikel-Serie nun mit der Gestaltung von Checkboxen sowie Radio Buttons und überprüft anhand praktischer Beispiele, ob sich CSS oder SVG besser zur Umsetzung eignen.

Checkboxen und Radio Buttons mit CSS

Formular-Elemente sind mit CSS generell etwas schwieriger zu gestalten. Da es in CSS keine Auswahlmöglichkeiten für das Aussehen von Checkboxen und Radio Buttons gibt, greifen Entwickler oft auf Bilder zurück – denn die können bearbeitet werden.


Image Sprite

Der einfachste Weg, Checkboxen und Radio Buttons in CSS zu gestalten, ist die Verwendung eines Image Sprites, der aus zwei Bildern besteht: Einmal der markierte Kasten und einmal der unmarkierte. Will man beide Elemente in einem Formular nutzen, ist es sinnvoll, beide in einem Sprite einzusetzen.

checkbox-radio-sprite-image-700x202

Screenshot: http://adobe.ly/1JCRPQD

Das das Bild umgebende Gebiet ist transparent gehalten und die Größe der Inputs entspricht ihrer realen Anzeigegröße auf der Website. Nun müssen die einzelnen Elemente auf der Site angeordnet werden, damit der Sprite genutzt werden kann. Das Markup sieht dann wie folgt aus:

<div>
<input type="checkbox" id="option"/>
<label for="option"> <span></span> Click me </label>
</div>

Wichtig ist hierbei, dass das Label an die Checkbox angebunden ist, indem das for-Attribut verwendet wird. Das Innere des <span>-Labels wird als Box genutzt, auf die der Sprite angewendet wird.

chechbox_radio button_css

Screenshot: http://adobe.ly/1JCRPQD

Standardmäßig ist die Checkbox verborgen und das Label ist so gestylt, dass ein Pointer Cursor erscheint, sobald man darüber fährt. Als Nächstes müssen die Dimensionen festgelegt werden, die die Checkbox haben soll (in diesem Beispiel 45px x 45 px). Zudem erhält das span-Element einen Hintergrund.

input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 45px;
height: 45px;
background: url(path/to/checkbox-radio-sprite.png) 0px center no-repeat;
}

Auf diese Weise nutzt der Bereich den Image Sprite als Hintergrund, aber nur die erste unmarkierte Checkbox erscheint innerhalb der Grenzen des span-Elements. Der Versatzwert, der für den Hintergrund gewählt wird, beeinflusst seine Position, sodass immer nur ein Teil des Sprites im Hintergrundbereich zu sehen ist. Mittels der :checked-Pseudo-Class wählt man das span-Label aus und stylt es so, dass die anderen Bilder der Checkbox und Radio Buttons auch im Hintergrund des span-Elements zu sehen sind. Das funktioniert, indem der Abstand von der betreffenden Checkbox bzw. Radio Buttons bis zum Rand des Sprites genutzt wird.

CSS-Verläufe

Anstelle der Verwendung eines PNG-Sprites lässt sich der span-Bereich in CSS-Verläufen auch so stylen, dass es wie eine Checkbox oder ein Radio Button aussieht. Auf diese Weise kann der Hintergrund allerdings nur eine Farbe oder ein Farbverlauf sein. So erhält man unmarkierte Felder – möchte man aber die markierten Boxen oder Buttons anzeigen, benötigt man ein Pseudo-Element. In diesem Fall soll ein Haken gesetzt werden, wenn das Element ausgewählt wird:

input[type="checkbox"]:checked + label span::before {
content: "✓";
color: deepPink;
text-align: center;
font-size: 40px;
}

Für den Radio Button muss nur die Hintergrundfarbe im Status „ausgewählt“ verändert werden:

input[type="radio"]:checked + label span {
background-image: radial-gradient(#FF5ABA, deepPink);
}
chechbox_radio button_css2

Screenshot: http://adobe.ly/1JCRPQD


Checkboxen und Radio Buttons mit SVG

Da SVG ein Bildformat ist, lässt es sich zuverlässig nutzen, um Checkboxen oder Radio Buttons zu stylen. Anstatt sich auf ein PNG zu beziehen, referenziert man jetzt SVG-Images, die jeweils einen Status beschreiben. Eigentlich muss noch nicht einmal das getan werden: Ein SVG-Bild allein reicht aus, da der Inhalt des Bildes in verschiedenen Status verändert werden kann, indem man den Wert des viewBox-Attributs ändert.

Nachdem ein SVG-Bild ausgewählt wurde, muss die Standard-Checkbox versteckt werden, damit das Bild stattdessen angezeigt wird:

input[type="checkbox"] {
display: none;
}
checkbox-animation

Screenshot: http://adobe.ly/1JCRPQD

Im Markup wird dann anstelle von <span> direkt das ausgewählte Bild verwendet. Es wird inline in das Label eingefügt. Das <path>-Element im SVG-Image sieht aus, als wäre die Checkbox per Hand ausgemalt worden:

Damit das gelingt, muss der Pfad innerhalb des svg-Elements animiert werden. Dafür wird die SVG Line Drawing Technique von Jake Archibald verwendet, die Sara Soueidan auf ihrem Blog ausführlich beschreibt.

 

checkboxcodrops

Auch Radio Buttons können auf diese Weise gestaltet werden; allein die SVG-Ecken sollten abgerundet werden.

Die vorgestellten Techniken funktionieren nicht mit dem Internet Explorer, da er weder CSS-Animationen noch SVG-Attribute unterstützt. Möchte man dennoch den IE nutzen, muss entweder auf eine nicht-animierte Version zurückgegriffen oder JavaScript für die Animation des Pfades genutzt werden.


Fazit

Um Checkboxen und Radio Buttons zu gestalten, gibt es für Sara Soueidan keine beste Option – CSS und SVG eignen sich gleichermaßen. Lediglich die Flexibilität von SVG sowie die Möglichkeit, das Beste aus beiden Welten zu kombinieren, sind bei der Nutzung von SVG-Image-Sprites von Vorteil.

Noch mehr zum Thema CSS vs. SVG findet sich hier:

Teil 1: CSS vs. SVG: wer hat bei grafischen Texteffekten die Nase vorn?

Teil 2: SVG vs. CSS – Styling Check

Teil 3: Formen mit SVG und CSS – welches Format eignet sich besser?

Teil 4: CSS vs. SVG – Die finale Runde

 

ML Conference 2019

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Python Summit 2019

Daten analysieren und transformieren mit Python

mit Doniyor Jurabayev (Freelancer)

Advanced Flow Control

mit Oz Tiram (noris network AG)

Aufmacherbild: Flat design modern concept of process web page coding von Shutterstock / Urheberrecht: Darko1981

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -