Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Formulare mit HTML und CSS

Individuelle Radiobuttons

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Radiobuttons lassen sich nicht einfach so gestalten, weil sie vom jeweiligen Betriebssystem kommen. Da hilft nur eins: Radiobuttons durch selbst gestaltete Elemente ersetzen. Das gezeigte Prinzip können Sie auch bei Checkboxen verwenden.

Transkript

Radio Buttons und Checkboxen lassen sich auf normalem Weg nicht gestalten. Das liegt daran, dass sie aus den Tiefen des Betriebssystems kommen. Deshalb sehen sie etwa auf einem Mac auch anders aus als auf einem PC. Dann ist es je nach Browser noch unterschiedlich, was passiert, wenn man den Radio Buttons oder Checkboxen Formatierungen wie Abstände oder Farben zuweist. Sie sehen hier ein Beispiel. Das wirkt dann je nach Browser unterschiedlich. Wenn man sich das anschaut, ist es aber trotzdem so, dass selbst wenn es gleich wirken würde, das ja wenig bringt, was man dadurch erreicht. Wenn Sie also individuell gestaltete Radio Buttons oder Checkboxen möchten, dann müssen Sie einen anderen Weg gehen. Der besteht darin, dass die ursprünglichen Radio Buttons etwa ausgeblendet werden. Statt dessen fügt man neue, selbst gestaltete Elemente hinzu. Ein Beispiel, wie das geht, wollen wir uns ansehen. Sie sehen hier Radio Buttons, die anders gestaltet sind als sonst. Sie finden dazu natürlich viele Lösungen im Internet. Entscheidend ist, dass Sie bei der Lösung, die Sie einsetzen, darauf achten, dass sich das Ganze weiterhin per Tastatur bedienen lässt. Formulare kann man nämlich sehr gut per Tastatur bedienen, ich mache es mit einem Pfeil nach oben, um sie auszuwählen. Das funktioniert prinzipiell, ohne dass Sie etwas tun müssen. Wenn Sie aber die Radio Buttons durch eigen gestaltete Elemente ersetzen, kann es sein, dass durch diese Lösung die Bedienbarkeit durch Tastatur nicht mehr gegeben ist und das ist natürlich eine Katastrophe. Also: Wichtig, dass die Lösung auch für Tastaturnutzer geht. Sehen wir uns an, wie wir das Ganze machen. Im Beispiel sind die Radio Buttons sehr einfach gestaltet. Nach demselben Prinzip können Sie natürlich auch andere Lösungen machen. Erst einmal brauche ich natürlich das richtige Mark-up. Ich brauche jeweils ein Input-Element und ein Label-Element. In diesem Fall ist es ganz wichtig, dass Label- und Input-Element wirklich miteinander verknüpft sind. Sonst funktioniert die Lösung nicht. Also, ID ist Frau im Beispiel, und for ist Frau, dann ist der Bezug hergestellt. ID: Herr, for: Herr. Gut. Kommen wir zu den eigentlichen Formatierungen. Es gibt ein paar grundlegende Sachen wie Schriftgröße, et cetera. Entscheidend ist, dass die Diff-Elemente, die jeweils um Input und Label stehen, position: relative erhalten. Damit bilden sie den Bezugspunkt für die Positionierung, die nachher stattfindet, nämlich über position: absolute. Die Labels kriegen einen cursor: pointer, display: inline-block. Das ist noch nichts besonderes. Dann geht es an das Ausblenden der Radio Buttons. Auf den Anfang komme ich gleich noch zu sprechen. Die erhalten einen transparenten Hintergrund. Und ich setze Opacity auf Null, damit sind sie durchsichtig. Außerdem kriegen meine Radio Buttons die Größe, die meine gestalteten Elemente erhalten sollen, im Beispiel 18 Pixel. Und ich definiere auch schon position: absolute. Damit sind sie in Relation zu dem umfassenden Element positioniert, was ja position: relative erhalten hat. Damit sind meine normalen Radio Buttons ausgeblendet. Ich muss jetzt noch dafür sorgen, dass meine selbst gestalteten Elemente natürlich an der Stelle platziert werden. Dafür gibt es folgenden Ausdruck. input type="radio" Ich wähle die Radio Buttons aus. Und zwar die Radio Buttons und danach soll direkt ein Label kommen, also eine Beschriftung. Damit wähle ich die Beschriftung aus, die auf einen Radio Button folgt. Mit dem before kann ich einen Inhalt einfügen. Der Inhalt ist im Beispiel ein Leerzeichen. Ich habe dann die Breiten für diesen Inhalt noch angegeben. Eine Hintergrundfarbe. Und das Ganze hat einen Border-Radius von 50 Prozent. Das bedeutet, ich habe einen Kreis erzeugt. Das sieht dann so aus, das ist dieser hellgraue Kreis, den Sie an dieser Stelle sehen. Jetzt muss ich noch dafür sorgen, dass der Kreis anders aussieht, wenn man reinklickt. Dafür formatiere ich den checked-Zustand. Sie sehen hier checked. Wenn der Radio Button gecheckt ist, dann soll am Anfang des Labels eine andere Hintergrundfarbe angezeigt werden. Ein Kreis ist es ja sowieso. Und ich möchte im Beispiel, dass das so ein Kreis nach innen ist. Das kann ich über Box Shadow erreichen wo ich keine Verschiebung angegeben habe, eine andere Farbe, und der soll nach innen gehen. Damit habe ich dieses Element mit dem Kreis nach innen erzeugt. Jetzt gibt es noch eine Sache zu klären. Das Raffinierte ist natürlich wirklich dieses checked. Dass ich den Zustand auswähle, wenn die Radio Buttons ausgewählt sind und dann eben dieses Label ändere. Ein Klick auf das Label bewirkt ja auch, dass das Element ausgewählt ist. Jetzt gibt es noch eine Besonderheit. Das ist dieser komische Ausdruck * :root. Meine Radio Buttons werden ja jetzt ganz anders gestaltet. Das soll natürlich nur gesamt klappen oder nicht klappen. In älteren Browsern möchte ich nicht, dass ein Teil der Formatierung komisch ankommt. Um zu verhindern, dass das von älteren Browsern gelesen wird, gebe ich diesen Selektor an: * :root. Damit wähle ich alle Root-Elemente, wenn sie innerhalb eines anderen Elements sind. Das wählt kein Element aus, aber es ist formal ein korrekter Selektor für neuere Browser. Ältere Browser hingegen können das überhaupt nicht verstehen. :root kennen die noch gar nicht. Dann ist es eine Besonderheit, wenn Sie Gruppen von Selektoren haben, und Sie haben einen Selektor, der formal ungültig ist, dann wird die ganze Gruppe nicht ausgewertet. Damit werden diese Formatierungen nicht angewandt. Das ist also ein Trick, um ältere Browser auszusperren, damit die gar nicht erst beginnen, diese Formatierungen darzustellen. Sie haben ein Beispiel gesehen, wie man individuelle Radio Buttons umsetzen kann, die im Beispiel ganz einfach gestaltet waren. Der Trick ist, dass man die ursprünglichen Radio Buttons ausblendet, etwa über opacity: 0, und neue Elemente erzeugt, die man über CSS einfügen kann. Im Beispiel hatten wir einen Kreis. Sehr schön ist, dass man über checked auswählen kann, wenn ein Radio Button ausgewählt ist und dann eben auch einen anderen Zustand anzeigen lassen kann.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!