html 如下
1
2
3
4
5
6
7
8
9
10
11
12
|
<!
DOCTYPE
HTML>
<
html
>
<
head
>
<
title
>css3实现checkbox变按钮 </
title
>
</
head
>
<
body
>
<
div
class='search_checkbox'>高级检索:
<
input
type='checkbox' id= 'switch'>
<
label
for='switch'>高级检索</
label
>
</
div
>
</
body
>
</
html
>
|
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
|
.search_checkbox{
margin
:
0
;
padding
:
0
;
margin-left
:
15px
;
display
: inline-
block
;
height
:
30px
;
padding-top
:
12px
;
}
.search_checkbox input[type=checkbox]{
height
:
0px
;
width
:
0px
;
visibility
:
hidden
;
}
.search_checkbox label{
cursor
:
pointer
;
height
:
20px
;
border-radius:
10px
;
display
: inline-
block
;
background-color
:
gray
;
width
:
40px
;
text-indent
:
-99999px
;
position
:
relative
;
}
.search_checkbox label::before {
content
:
''
;
display
:inline-
block
;
background-color
:
white
;
height
:
15px
;
width
:
15px
;
position
:
absolute
;
top
:
2.5px
;
left
:
2.5px
;
border-radius:
7px
;
transition:
0.3
s;
}
.search_checkbox input:checked + label {
background
:
#bada55
;
}
.search_checkbox input:checked + label:before {
left
: calc(
100%
-
2.5px
);
transform: translateX(
-100%
);
}
.search_checkbox label:active:before{
width
:
20px
;
}
|