利用CSS3美化checkbox radio

input、button可以通过CSS自定义外观，而checkbox radio则没办法通过CSS自定义样式。今天逛GOOGLE+的时候发现了一个利用CSS3伪元素:after来自定义checkbox radio样式的方法。利用CSS3不仅可以自定义checkbox radio的边框或背景还可以改变选中时的样式。具体看以下代码：
CSS代码：

1. input[type=checkbox],
2. input[type=radio] {
3. -webkit-appearance: none;
4. appearance: none;
5. width: 13px;
6. height: 13px;
7. margin: 0;
8. cursor: pointer;
9. vertical-align: bottom;
10. background: #fff;
11. border: 1px solid #dcdcdc;
12. -webkit-border-radius: 1px;
13. -moz-border-radius: 1px;
14. border-radius: 1px;
15. -webkit-box-sizing: border-box;
16. -moz-box-sizing: border-box;
17. box-sizing: border-box;
18. position: relative;
19. }
20. input[type=checkbox]:active,
21. input[type=radio]:active {
22. border-color: #c6c6c6;
23. background: #ebebeb;
24. }
25. input[type=checkbox]:hover {
26. border-color: #c6c6c6;
27. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
28. -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
29. box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
30. }
31. input[type=radio] {
32. -webkit-border-radius: 1em;
33. -moz-border-radius: 1em;
34. border-radius: 1em;
35. width: 15px;
36. height: 15px;
37. }
38. input[type=checkbox]:checked,
39. input[type=radio]:checked {
40. background: #fff;
41. }
42. input[type=radio]:checked::after {
43. content: ”;
44. display: block;
45. position: relative;
46. top: 3px;
47. left: 3px;
48. width: 7px;
49. height: 7px;
50. background: #666;
51. -webkit-border-radius: 1em;
52. -moz-border-radius: 1em;
53. border-radius: 1em;
54. }
55. input[type=checkbox]:checked::after {
56. content: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png);
57. display: block;
58. position: absolute;
59. top: -6px;
60. left: -5px;
61. }
62. input[type=checkbox]:focus {
63. outline: none;
64. border-color:#4d90fe;
65. }

用到的图片
具体效果:

或查看 Google 帐户页面