Skip to content

Commit e7cce4d

Browse files
materialcodermaterialcoder
committed
task1
自定义checkbox，radio样式
1 parent c97938d commit e7cce4d

File tree

4 files changed

+116
-0
lines changed

4 files changed

+116
-0
lines changed

‎1 自定义checkbox，radio样式/img/bg.png

1.82 KB
Loading

‎1 自定义checkbox，radio样式/img/bg1.png

1.28 KB
Loading

‎1 自定义checkbox，radio样式/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>自定义checkbox，radio样式——背景图片</title>
6+
<style>
7+
input {
8+
display: none;
9+
height: 16px;
10+
}
11+
label {
12+
height: 16px;
13+
padding-left: 16px;
14+
display: block;
15+
margin-bottom: 10px;
16+
}
17+
label.radio {
18+
background: url(img/bg.png) no-repeat 0 -12px;
19+
}
20+
input[type="radio"]:checked + label.radio {
21+
background: url(img/bg.png) no-repeat 0 -56px;
22+
}
23+
label.checkbox {
24+
background: url(img/bg.png) no-repeat 0 -34px;
25+
}
26+
input[type="checkbox"]:checked + label.checkbox {
27+
background: url(img/bg.png) no-repeat 0 -76px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<input type="radio" id="a"><label for="a" class="radio"></label>
33+
<input type="checkbox" id="b"><label for="b" class="checkbox"></label>
34+
</body>
35+
</html>

‎1 自定义checkbox，radio样式/index2.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>自定义checkbox，radio样式——伪元素</title>
6+
<style>
7+
input {
8+
display: none;
9+
height: 16px;
10+
}
11+
label {
12+
height: 16px;
13+
padding-left: 16px;
14+
position: relative;
15+
display: block;
16+
margin-bottom: 10px;
17+
18+
}
19+
label.radio::before {
20+
content: '';
21+
display: block;
22+
width: 14px;
23+
height: 14px;
24+
border: 1px solid #ccc;
25+
border-radius: 50%;
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
}
30+
label.radio::after {
31+
content: '';
32+
display: none;
33+
width: 6px;
34+
height: 6px;
35+
background: #f00;
36+
border-radius: 50%;
37+
position: absolute;
38+
top: 5px;
39+
left: 5px;
40+
}
41+
input[type="radio"]:checked + label.radio::before {
42+
border: 1px solid #f00;
43+
}
44+
input[type="radio"]:checked + label.radio::after {
45+
display: block;
46+
}
47+
label.checkbox::before {
48+
content: '';
49+
display: block;
50+
width: 14px;
51+
height: 14px;
52+
border: 1px solid #ccc;
53+
position: absolute;
54+
top: 0;
55+
left: 0;
56+
}
57+
label.checkbox::after {
58+
content: '';
59+
display: none;
60+
width: 6px;
61+
height: 3px;
62+
border-left: 2px solid #f00;
63+
border-bottom: 2px solid #f00;
64+
transform: rotate(-45deg);
65+
position: absolute;
66+
top: 5px;
67+
left: 4px;
68+
}
69+
input[type="checkbox"]:checked + label.checkbox::before {
70+
border: 1px solid #f00;
71+
}
72+
input[type="checkbox"]:checked + label.checkbox::after {
73+
display: block;
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<input type="radio" id="a"><label for="a" class="radio"></label>
79+
<input type="checkbox" id="b"><label for="b" class="checkbox"></label>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)