Heute zeige ich euch einen kleinen Trick, wie ihr eine Checkbox so erweitern könnt, dass ihr ein eigenes Icon verwenden könnt. Damit könnt ihr euer Formular sogar noch besser an euer CI anpassen.
Video
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div class="container">
<form>
<p>
<input type="checkbox" id="schweiz" name="laender">
<label for="schweiz">Schweiz</label>
</p>
<p>
<input type="checkbox" id="deutschland" name="laender">
<label for="deutschland">Deutschland</label>
</p>
<p>
<input type="checkbox" id="oesterreich" name="laender">
<label for="oesterreich">Österreich</label>
</p>
</form>
</div> |
<div class="container">
<form>
<p>
<input type="checkbox" id="schweiz" name="laender">
<label for="schweiz">Schweiz</label>
</p>
<p>
<input type="checkbox" id="deutschland" name="laender">
<label for="deutschland">Deutschland</label>
</p>
<p>
<input type="checkbox" id="oesterreich" name="laender">
<label for="oesterreich">Österreich</label>
</p>
</form>
</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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #886eff;
}
.container {
width: 500px;
background-color: #fff;
box-shadow: 0 15px 30px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.5);
padding: 2em;
}
[type="checkbox"] {
opacity: 0;
}
/* label design*/
[type="checkbox"]+label {
position: relative;
padding-left: 30px;
cursor: pointer;
display: inline-block;
color: #666;
line-height: 25px;
}
[type="checkbox"]:checked+label {
color: #5fd25f;
}
/* eigene checkbox*/
[type="checkbox"]+label::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
outline: 2px solid #aaa;
background-color: #fff;
left: 0;
top: 0;
}
[type="checkbox"]:checked+label::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0;
top: 0;
outline: 2px solid #5fd25f;
background-color: #fff;
}
[type="checkbox"]:checked+label::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0;
top: 0;
background-image: url(checkbox-ring.png);
background-size: contain;
/*animation*/
transform: scale(1);
opacity: 1;
transition: all 300ms ease;
}
[type="checkbox"]:not(:checked)+label::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0;
top: 0;
background-image: url(checkbox-haeckchen.png);
background-size: contain;
transform: scale(0);
opacity: 0;
} |
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #886eff;
}.container {
width: 500px;
background-color: #fff;
box-shadow: 0 15px 30px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.5);
padding: 2em;
}[type="checkbox"] {
opacity: 0;
}/* label design*/
[type="checkbox"]+label {
position: relative;
padding-left: 30px;
cursor: pointer;
display: inline-block;
color: #666;
line-height: 25px;
}[type="checkbox"]:checked+label {
color: #5fd25f;
}/* eigene checkbox*/
[type="checkbox"]+label::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
outline: 2px solid #aaa;
background-color: #fff;
left: 0;
top: 0;
}[type="checkbox"]:checked+label::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0;
top: 0;
outline: 2px solid #5fd25f;
background-color: #fff;}[type="checkbox"]:checked+label::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0;
top: 0;
background-image: url(checkbox-ring.png);
background-size: contain;/*animation*/
transform: scale(1);
opacity: 1;
transition: all 300ms ease;
}[type="checkbox"]:not(:checked)+label::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0;
top: 0;
background-image: url(checkbox-haeckchen.png);
background-size: contain;
transform: scale(0);
opacity: 0;
}
0 Kommentare