Wer schon mal ein Formular designt hat kennt sicher die Checkbox. Damit lassen sich einfach Dinge an- und auswählen aber einen Nachteil haben sie, sie sehen oft hässlich aus. Aus diesem Grund zeige ich euch heute wie ihr so eine Checkbox als Schalter darstellen könnt. Diese Art Schalter setze ich vorallem in meinen WordPress Plugins ein wenn ich eine Funktion einschalten oder ausschalten möchte.

Ab heute wisst ihr wie man sowas mit CSS schön gestalten kann.

Video

HTML

<div class="container">
 <form>
  <input type="checkbox">
 </form>
</div>

CSS

.container {
    position: absolute;
}

input[type="checkbox"] {
    appearance: none;
    height: 70px;
    width: 150px;
    background-color: #34384b;
    border-radius: 50px;
    position: relative;
    transition: 300ms;
    cursor: pointer;
    outline: none;
    border: 1px solid #000;
}

input[type="checkbox"]:before {
    content: "";
    position: absolute;
    height: 55px;
    width: 55px;
    background-color: #d5d5d5;
    border-radius: 50%;
    border: 1px solid #000;
    left: 10px;
    top: 5px;
    transition: 300ms;

}

input[type="checkbox"]:checked {
    background-color: #ececec;
}

input[type="checkbox"]:checked:before {
    background-color: #5acbff;
    left: 75px;
}