👚 🎦 🍺 Gestalten von Kontrollkästchen und Optionsfeldern mit CSS3 🧑🏽‍🤝‍🧑🏽 👨🏿‍🔧 🥑

Beim Erstellen von CSS-Stilen für HTML-Formulare können Entwickler häufig das Erscheinungsbild von Kontrollkästchen und Optionsfeldern nicht direkt ändern. Lassen Sie uns sehen, wie Sie diese Einschränkung mit CSS3-Tools und ohne Verwendung von JavaScript-Code umgehen können.

Fügen Sie daher zunächst einige normale Kontrollkästchen hinzu und wechseln Sie zum Formular:

/*   */

<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>

<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>

<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>

/*   */

<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>

<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>

<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>

Verschieben Sie die Standardanzeige von Elementen über den Bereich hinaus und fügen Sie den benachbarten Beschriftungen Einrückungen hinzu:

input[type="checkbox"]:checked, 
input[type="checkbox"]:not(:checked), 
input[type="radio"]:checked, 
input[type="radio"]:not(:checked) 
{
    position: absolute;
    left: -9999px;
}

input[type="checkbox"]:checked + label, 
input[type="checkbox"]:not(:checked) + label, 
input[type="radio"]:checked + label, 
input[type="radio"]:not(:checked) + label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    cursor: pointer;
}

Fügen Sie vor den Etiketten stilisierte Behälter für unsere benutzerdefinierten Elemente hinzu. Bei Flaggen handelt es sich um Quadrate mit leicht abgerundeten Kanten für die Schönheit und für Schalter nur um kleine Kreise:

input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
}

input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before {
    border-radius: 2px;
}

input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    border-radius: 100%;
}

Fügen Sie nun Auswahlindikatoren hinzu. Bei Flags sind dies Dämmerungen, bei Schaltern sind kleinere, mit Farbe gefüllte Kreise kleiner als der Container selbst. Für einen größeren Effekt haben wir auch eine kleine Animation eingerichtet:

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after {
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-radius: 1px;
    border-left: 4px solid #e145a3;
    border-bottom: 4px solid #e145a3;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #e145a3;
}

Um die Dohle darzustellen, drehen wir ein kleines Rechteck, dessen zwei Seiten farbig bemalt sind, um 45 Grad gegen den Uhrzeigersinn.

Beachten Sie Folgendes: Mit den Selektoren vor und nach können Sie Inhalte unmittelbar vor und nach dem Inhalt des Etiketts selbst hinzufügen. Da wir für Beschriftungen die relative Positionierung (Position: relativ) festlegen, können wir die kontextbezogene absolute Positionierung für deren Inhalt festlegen.

Es bleibt, die Auswahlindikatoren auszublenden, wenn das Element nicht ausgewählt ist, und sie entsprechend anzuzeigen, wenn sich das Element im ausgewählten Zustand befindet:

input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
}

input[type="checkbox"]:checked + label:after, 
input[type="radio"]:checked + label:after {
    opacity: 1;
}

Wir fügen hinzu, dass die hier beschriebene Lösung in allen modernen Versionen der Browser Chrome, Firefox, Safari, Opera sowie ab Version 9 und in Internet Explorer funktioniert.

Vollständige CSS-Definitionen können hier heruntergeladen werden .

Gestalten von Kontrollkästchen und Optionsfeldern mit CSS3

More articles: