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.3s;}.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;} |