Bootstrap复选框和单选按钮美化插件

官网地址 
需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件，可在上面的网站上下载。 
checkboxs的样式 

radio的样式 

只要引入上面所说的文件之后，也可以自己定制样式，代码如下：

.checkbox label::before {    content: "";    display: inline-block;    position: absolute;    width: 20px;    height: 20px;    left: 0;    margin-left: -20px;    border: 1px solid #cccccc;<!--没选中时的边框颜色-->    border-radius: 3px;    background-color: #fff;<!--没选中时的颜色-->    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;}.checkbox label::after {    display: inline-block;    position: absolute;    width: 16px;    height: 16px;    left: 0;    top: 0;    margin-left: -19px;<!--可以改变“√”的位置-->    padding-left: 3px;<!--可以改变“√”的位置-->    padding-top: 1px;<!--可以改变“√”的位置-->    font-size: 13px;<!--选中后的中间打钩的字体大小（字体越大中间的勾越大越明显）-->    color: #FAD500;<!--选中后的中间打钩的颜色-->}.checkbox input[type="checkbox"],.checkbox input[type="radio"] {    opacity: 0;    z-index: 1;}.checkbox input[type="checkbox"]:focus + label::before,.checkbox input[type="radio"]:focus + label::before {    outline: thin dotted;    outline: 5px auto -webkit-focus-ring-color;    outline-offset: -2px;    background-color: black;    border-color: black;}.checkbox input[type="checkbox"]:checked + label::before,.checkbox input[type="radio"]:checked + label::before {    background-color: black;<!--选中后的背景颜色-->    border-color: black;<!--选中后的边框颜色-->}.checkbox input[type="checkbox"]:checked + label::after,.checkbox input[type="radio"]:checked + label::after {    font-family: "FontAwesome";    content: "\f00c";}.checkbox input[type="checkbox"]:disabled + label,.checkbox input[type="radio"]:disabled + label {    opacity: 0.65;}.checkbox input[type="checkbox"]:disabled + label::before,.checkbox input[type="radio"]:disabled + label::before {    background-color: #eeeeee;    cursor: not-allowed;}.checkbox.checkbox-circle label::before {    border-radius: 50%;<div>        <div class="checkbox checkbox-circle">            <input id="radio1" class="styled" type="radio" name="radio">            <label for="radio1" class="font-bolder">                radio1            </label>        </div>        <div class="checkbox checkbox-circle">            <input id="radio2" class="styled" type="radio" name="radio">            <label for="radio2" class="font-bolder">               raido2            </label>        </div>    </div>
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

上面代码执行的效果 

原文地址：http://blog.csdn.net/a837756/article/details/53307093