Geschrieben von Christian Schnettelker

Schlagwörter:

Webdesign-Tipps 4: Radiobuttons und Checkboxen mit CSS formatieren

Irgendwie habe ich das Gefühl, dass so ziemlich alle gängigen Browser mit Radiobuttons und Checkboxen auf Kriegsfuß stehen. Diese werden von Browser zu Browser anders positioniert und so gut wie nie so, dass diese zum Text passen. Hier zur Verdeutlichung der Problematik ein Ausschnitt aus meiner Seite im Vorher/Nachher-Vergleich:

Radiobuttons unformatiert / mit CSS formatiert
Manche mag der Versatz nach links und oben nicht stören, mich aber schon. Deshalb stelle heute für alle, die auch Wert auf ein schönes Schriftbild legen, meine Lösung des Problems in CSS vor, welche ich bei meinem Kostenrechner verwendet habe.

Zur Klarstellung: mir geht es hier nicht um das „tunen“ der Elemente, z.B. Änderung der Farbe oder andere Spielereien, mir geht es um die korrekte Positionierung vor dem Text, sodass sich der Button oder die Checkbox schön in das Textbild einfügt und das Formular nicht „zusammengefrickelt“ aussieht.

Was nicht passt, wird passend gemacht

Der HTML-Code für einen Radiobutton und eine Checkbox sieht normalerweise ungefähr so aus:

<input type="radio" checked="checked" name="cms" value="aktuelles" onclick="calc()" />Aktuelles-Seite einrichten
<input type="checkbox" name="fullsrvc" value="1" onclick="calc()" />Full Service

Um Zugriff auf die Position der Elemente per CSS zu nehmen könnte man nun eine Klasse, z.B. class=“radiobutton“ definieren, in den HTML-Code einfügen und per CSS formatieren. Ich verwende aber, weil es noch einfacher geht und die Schriftart auf meinen Seiten überall gleich ist, den Type Selector input mit dem (Matching) Attribute Selector [type="radio"] für alle Radiobuttons und [type="checkbox"] für alle Checkboxen:

input[type="radio"] { margin:0px 7px 4px 1px; vertical-align:middle; width:13px; height:13px; padding:0px; }
input[type="checkbox"] { margin:0px 8px 3px 1px; vertical-align:middle; width:13px; height:13px; padding:0px; }

Dabei sind die margin-Angaben je nach Schrifthöhe anzupassen, damit die Elemente auch wirklich auf der gleichen Höhe wie die Schrift liegen, kein Abstand links und ein ausreichender Abstand zum Text rechts vorhanden ist. In der obigen margin-Kurznotation stehen die Werte bei input[type="radio"] für: Abstand oben (0 px), Abstand rechts (7 px), Abstand unten (4 px) und Abstand links (1 px).

Mit der Eigenschaft vertical-align habe ich schlechte Erfahrungen gemacht, das funktioniert irgendwie nie so, wie es soll. Trotzdem gebe ich diese Eigenschaft an, um zumindest eine grobe Justierung vorzunehmen. Die width und height-Angaben sowie das padding sind für unseren lieben Freund, den Internet Explorer notwendig, damit auch dort die Anzeige korrekt ist.

Vorsicht Falle

Achtung! Da ich selber darauf hereingefallen bin ein Hinweis zu obigem CSS-Code: achten Sie darauf, dass zwischen input und [type="x"] KEIN Leerzeichen steht, andernfalls funktioniert die Formatierung natürlich nicht.

Ich habe meinen Webdesign-Kostenrechner mit Chrome, Firefox, Opera und im Internet Explorer getestet, die Radiobuttons und Checkboxen passen sich nun überall schön in das Schriftbild ein.

Welche Erfahrungen haben Sie damit gemacht, hat Ihnen dieser kleine Artikel weitergeholfen? Habe ich etwas übersehen? Hilfreiche Kommentare und Rückmeldungen sind mir immer willkommen!

Kommentare

Kommentare

  1. Gelegentlich schrieb:

    Gelegentlich schaue ich mal nach hilfreichen kleinen HTML- und CSS-Codes, die das grauslige Internetdesign etwas schöner machen … in diesem Fall spricht mir der Artikel ‚aus der Seele‘. Danke für diesen Artikel

  2. Rudolf Fiedler schrieb:

    Hi,
    Bisher habe ich bei Radios und Checkboxen immer mit Klassen gearbeitet,
    die Verwendung des Selektors (auch mit dem Trick ohne Leerzeichen) ist da doch wesentlich eleganter,
    vielen Dank,

    Rudolf Fiedler

  3. Lars schrieb:

    Interessante Sache. Ihre Blogbeiträge sind immer wieder hilfreich.
    Auch für Laien ist das verständlich erklärt.
    Beste Grüße,
    Lars

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.