使用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.   
  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. }   
posted @ 2017-12-21 14:25  大瑶的踩坑之旅  阅读(671)  评论(0)    收藏  举报