Checkbox Schalter mit CSS erstellen

von | Dez 10, 2021 | Allgemein | 0 Kommentare

Schlagwörter: CSS

Inhaltsverzeichnis

In dieser CSS Anleitung schauen wir uns mal eine neue Methode an mit der man die HTML Checkbox Funktion designmässig ein wenig aufpeppen kann. Anstatt es dieses Kästchen ist das man Anhäckeln kann oder nicht, kann man auch ganze Schalter daraus bauen. Und hier zeige ich euch wie es geht.

Video

HTML

1
2
3
4
5
6
7
8
  <div class="field-group">
        <input type="checkbox" name="checkbox" id="instagram" class="checkbox-field">
        <label for="instagram" class="checkbox-label">Instagram</label>
    </div>
    <div class="field-group">
        <input type="checkbox" name="checkbox" id="Tiktok" class="checkbox-field">
        <label for="Tiktok" class="checkbox-label">Tiktok</label>
    </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #020100;
}
 
.field-group {
    width: 200px;
}
.checkbox-field {
    opacity: 0;
}
 
.checkbox-label {
    display:inline-block;
    width: 100%;
    padding: 10px 20px;
    background: #235789;
    border: 2px solid #fff;
    font-size: 1.4em;
    color: #d1d1d1;
    text-align: center;
}
 
.checkbox-label:hover {
    background: #f1d302;
    color: #000;
}
 
.checkbox-field:checked + .checkbox-label {
    background: #c1292e;
    color: #fff;
}

Nun wünsche ich euch viel Spass mit eurer neuen Checkbox Schalterfunktion.

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert