使用css修改radio、checkbox样式

原文链接： https://www.mk2048.com/blog/blog.php?id=h0k2ch2j2c2j&title=%E4%BD%BF%E7%94%A8css%E4%BF%AE%E6%94%B9radio%E3%80%81checkbox%E6%A0%B7%E5%BC%8F

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.   
29. input[type=checkbox]:after  {  
30.     content: "";  
31.     display:block;  
32.     width: 20px;  
33.     height: 20px;  
34.     text-align: center;  
35.     line-height: 14px;  
36.     font-size: 16px;  
37.     color: #fff;  
38.     border: 2px solid #ddd;  
39.     background-color: #fff;  
40.     box-sizing:border-box;  
41. }  
42. input[type=checkbox]:checked:after  {  
43.     border: 4px solid #ddd;  
44.     background-color: #37AF6E;  
45. }  
46.   
47. input[type=radio]:checked:after  {  
48.     content: "L";  
49.     transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  
50.     -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  
51.     border-color: #37AF6E;  
52.     background-color: #37AF6E;  
53. }   

更多专业前端知识，请上 【猿2048】www.mk2048.com