![css_input[checked]复选框去掉默认样式并添加新样式](https://900zi.500zi.com/uploadfile/img/15/916/a4f94a03af5a4b94686743ad3de436fb.jpg)
效果对比：
“\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 #CACDCF27 }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
参考博客
