使用css修改radio、checkbox样式

1. input[type=radio],input[type=checkbox]  {
2. display: inline-block;
3. vertical-align: middle;
4. width: 20px;
5. height: 20px;
6. margin-left: 5px;
7. -webkit-appearance: none;
8. background-color: transparent;
9. border: 0;
10. outline: 0 !important;
11. line-height: 20px;
12. color: #d8d8d8;
13. }
14. input[type=radio]:after  {
15. content: "";
16. display:block;
17. width: 20px;
18. height: 20px;
19. border-radius: 50%;
20. text-align: center;
21. line-height: 14px;
22. font-size: 16px;
23. color: #fff;
24. border: 2px solid #ddd;
25. background-color: #fff;
26. box-sizing:border-box;
27. }
28. input[type=checkbox]:after  {
29. content: "";
30. display:block;
31. width: 20px;
32. height: 20px;
33. text-align: center;
34. line-height: 14px;
35. font-size: 16px;
36. color: #fff;
37. border: 2px solid #ddd;
38. background-color: #fff;
39. box-sizing:border-box;
40. }
41. input[type=checkbox]:checked:after  {
42. border: 4px solid #ddd;
43. background-color: #37AF6E;
44. }
45. input[type=radio]:checked:after  {
46. content: "L";
47. transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
48. -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
49. border-color: #37AF6E;
50. background-color: #37AF6E;
51. }