Checkboxen und Radio-Buttons mit CSS3 stilvoll gestalten

In diesem Beitrag findet Ihr Code-Beispiele für bessere Gestaltung von Checkboxen und Radio-Buttons.

HTML-Checkboxen und Radio-Buttons sind uns gut bekannt. Das frustrierendste daran ist, dass es keine Möglichkeit gibt, ihre Optik zu ändern. Abhängig vom Betriebssystem und Browser sehen sie  anders aus und können nicht mit CSS formatiert werden. Daher ist das für die meisten Designer eine Herausforderung, diese Elemente ansprechend zu gestalten, damit sie das Erscheinungbild nicht beeinträchtigen. In diesem Tutorial möchten wir zeigen, wie Ihr diesen Elementen mehr Attraktivität verleihen könnt. Wir haben einfache und wirksame Tricks für Euch parat!

Seid stark. Versteckt Eure Checkboxen

Das hört sich vielleicht widerspruchsvoll an, denn wir haben Tricks fürs besseres Aussehen versprochen. Hier möchten wir das Geheimnis lüften: Damit Checkboxen und Radiobuttons gut aussehen, müssen wir zuerst sie einfach verbergen und darüber vergessen! Dafür wenden wir eine einfache Regel an:

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

Euch fällt wohl ein: Was werden wir denn ohne sie tun? Keine Sorge, wir werden unsere eigenen Checkboxen bauen, lasst uns einfach reingehen.

Radio-Buttons

Das ist unser Markup:

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

Wir haben eine Sektion, wo wir drei Radio-Buttons platzieren möchten. In diesem Tutorial werden wir Checkboxen weiter behandeln, für die gilt das gleiche Prinzip. Jeder Input wird mit <div>-Container  umschlossen. Also, jeder Input hat ein <label> mit einem <span>.

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

Wichtig!

Da wir die Radio- und Checkbox-Inputs ausgeblendet haben, können wir auf sie nur dann zugreifen, wenn wir ein <label>-Tag verwenden. Zum richtigen Funktionieren muss das <label>-Tag das for-Attribut mit einer ID des korrespondierenden Inputs enthalten. Wenn ein Input eine ID radio-1 hat, sollte das for-Attribut auch radio-1 sein.

Vielleicht erstaunt Ihr, wozu der Text in jedem <label> mit einem <span> umschlossen ist:

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

Da wir Radio-Buttons mit :: before und :: after Pseudo-Elementen stylen wollen, brauchen wir ein Eltern-Element, auf dessen Basis sie positioniert werden können. In diesem Fall ist das <label>:

.container label {
  position: relative;
}

Hier findet Ihr ein Stilset, das sich sowohl für Checkboxen, als auch für Radio-Buttons verwendet lässt:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Obere und untere Eigenschaften werden auf 0 gesetzt und kombiniert mit margin: auto; unsere Elemente zentrieren wir horizontal.

So sehen die anderen Stile aus:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

Die letzte Regel ist am wichtigsten, denn sie macht den ganzen Trick aus. Die Pseudoklasse :checked macht es möglich, Änderungen an Pseudoelementen vorzunehmen. Mit einem '+' Selektor können wir das nächste Geschwisterelement auswählen und unser span.radio bearbeiten, wobei wir neue Regeln auf das Pseudoelement :: after anwenden. In diesem Fall ändern wir seine horizontale Position und die Farbe.

Um den Schalter weicher zu gestalten, setzen wir transition für  die Eigenschaft left und die Hintergrundfarbe auf 0,25 Sekunden. Wenn wir nun auf den Radioknopf klicken, bewegt sich der Schalter sanfter. 

Checkboxes

Wenn Ihr benutzerdefinierte Checkboxes erstellen möchtet, ist die Methode gleich. Werft einen Blick auf die Stile:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

Der einzige Unterschied liegt darin, dass wir ein Icon aus der Sammlung FontAwesome als Pseudo-Element :: after verwenden. Standardmäßig ist es transparent, aber wenn die Checkbox aktiviert ist, wird das Symbol blau.

Wenn Ihr ein Font Awesome-Symbol in Eurem Pseudo-Element verwenden möchten, solltet Ihr Euren Code in die Eigenschaft content einfügen und die Eigenschaft font-family als FontAwesome angeben. Beispielsweise:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Dem Code f00c geht ein Backslash voran, der benötigt wird, um das Unicode-Zeichen zu maskieren. Der Unicode seht Ihr auf der Seite des gewählten Icons:

Endeffekt

Es wäre alles. Jetzt haben wir Checkboxen und Radio-Buttons attraktiv und funktional gestaltet. Ihr könnt sie für Eure eigenen Projekte optimieren. Den vollständigen Quellcode könnt Ihr euch in der CodePen-Demo sehen:

See the Pen Radio buttons and check boxes 2 by Olga Kulmann (@olga-kulmann) on CodePen.

Dieses Tutorial wurde aus dem Englischen übersetzt. Das Original des Beitrags von Matthew Cain findet Ihr hier.