css_input[checked]复选框去掉默认样式并添加新样式

效果对比：

 

“\2713”实体符号√ ；如有兴趣查看详细实体符号请点这里

 

代码实现：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             input[type="checkbox"] {
 9                 width: 12px;
10                 height: 12px;
11                 display: inline-block;
12                 text-align: center;
13                 vertical-align: middle;
14                 line-height: 12px;
15                 position: relative;
16             }
17             
18             input[type="checkbox"]::before {
19                 content: "";
20                 position: absolute;
21                 top: 0;
22                 left: 0;
23                 background: #fff;
24                 width: 100%;
25                 height: 100%;
26                 border: 1px solid #CACDCF
27             }
28             
29             input[type="checkbox"]:checked::before {
30                 content: "\2713";
31                 background-color: #2196F3;
32                 color: #fff;
33                 position: absolute;
34                 top: 0;
35                 left: 0;
36                 width: 100%;
37                 border: 1px solid #2196F3;
38                 font-size: 12px;
39                 font-weight: bold;
40             }
41         </style>
42     </head>
43 
44     <body>
45         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
46         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
47         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
48         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
49         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
50         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
51     </body>
52 
53 </html>
View Code

 

参考博客

 

posted @ 2018-10-18 15:52  幽谷兰花  阅读(6083)  评论(0)  编辑  收藏  举报