首页>>表单>>纯css checkbox复选框与radio单选框美化(2017-10-25)

纯css checkbox复选框与radio单选框美化

纯css checkbox复选框与radio单选框美化
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="col">  
  2.             <h4>Radio(单选按钮)</h4>  
  3.             <div class="opt">  
  4.                 <input class="magic-radio" type="radio" name="radio" id="r1" value="option1">  
  5.                 <label for="r1">Normal</label>  
  6.             </div>  
  7.             <div class="opt">  
  8.                 <input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked>  
  9.                 <label for="r2">Checked</label>  
  10.             </div>  
  11.             <div class="opt">  
  12.                 <input class="magic-radio" type="radio" name="radio" id="r3" value="option3" disabled>  
  13.                 <label for="r3" style="color:#ccc">禁用</label>  
  14.             </div>  
  15.             <div class="opt">  
  16.                 <input class="magic-radio" type="radio" id="r4" value="option4" checked disabled>  
  17.                 <label for="r4" style="color:#ccc">Checked && Disabled</label>  
  18.             </div>  
  19.         </div>  

 

CSS Code
  1. /*--相关的单选复选按钮--*/  
  2. @keyframes hover-color {  
  3.   from {  
  4.     border-color: #c0c0c0; }  
  5.   to {  
  6.     border-color: #3e97eb; } }  
  7.   
  8. .magic-radio,  
  9. .magic-checkbox {  
  10.   position: absolute;  
  11.   display: none; }  
  12.   
  13. .magic-radio[disabled],  
  14. .magic-checkbox[disabled] {  
  15.   cursor: not-allowed; }  
  16.   
  17. .magic-radio + label,  
  18. .magic-checkbox + label {  
  19.   position: relative;  
  20.   display: block;  
  21.   padding-left: 30px;  
  22.   cursor: pointer;  
  23.   vertical-align: middle; }  
  24.   .magic-radio + label:hover:before,  
  25.   .magic-checkbox + label:hover:before {  
  26.     animation-duration: 0.4s;  
  27.     animation-fill-mode: both;  
  28.     animation-name: hover-color; }  
  29.   .magic-radio + label:before,  
  30.   .magic-checkbox + label:before {  
  31.     position: absolute;  
  32.     top: 0;  
  33.     left: 0;  
  34.     display: inline-block;  
  35.     width: 20px;  
  36.     height: 20px;  
  37.     content: '';  
  38.     border: 1px solid #c0c0c0; }  
  39.   .magic-radio + label:after,  
  40.   .magic-checkbox + label:after {  
  41.     position: absolute;  
  42.     display: none;  
  43.     content: ''; }  
  44.   
  45. .magic-radio[disabled] + label,  
  46. .magic-checkbox[disabled] + label {  
  47.   cursor: not-allowed;  
  48.   color: #e4e4e4; }  
  49.   .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,  
  50.   .magic-checkbox[disabled] + label:hover,  
  51.   .magic-checkbox[disabled] + label:before,  
  52.   .magic-checkbox[disabled] + label:after {  
  53.     cursor: not-allowed; }  
  54.   .magic-radio[disabled] + label:hover:before,  
  55.   .magic-checkbox[disabled] + label:hover:before {  
  56.     border: 1px solid #e4e4e4;  
  57.     animation-name: none; }  
  58.   .magic-radio[disabled] + label:before,  
  59.   .magic-checkbox[disabled] + label:before {  
  60.     border-color: #e4e4e4; }  
  61.   
  62. .magic-radio:checked + label:before,  
  63. .magic-checkbox:checked + label:before {  
  64.   animation-name: none; }  
  65.   
  66. .magic-radio:checked + label:after,  
  67. .magic-checkbox:checked + label:after {  
  68.   display: block; }  
  69.   
  70. .magic-radio + label:before {  
  71.   border-radius: 50%; }  
  72.   
  73. .magic-radio + label:after {  
  74.   top: 7px;  
  75.   left: 7px;  
  76.   width: 8px;  
  77.   height: 8px;  
  78.   border-radius: 50%;  
  79.   background: #3e97eb; }  
  80.   
  81. .magic-radio:checked + label:before {  
  82.   border: 1px solid #3e97eb; }  
  83.   
  84. .magic-radio:checked[disabled] + label:before {  
  85.   border: 1px solid #c9e2f9; }  
  86.   
  87. .magic-radio:checked[disabled] + label:after {  
  88.   background: #c9e2f9; }  
  89.   
  90. .magic-checkbox + label:before {  
  91.   border-radius: 3px; }  
  92.   
  93. .magic-checkbox + label:after {  
  94.   top: 2px;  
  95.   left: 7px;  
  96.   box-sizing: border-box;  
  97.   width: 6px;  
  98.   height: 12px;  
  99.   transform: rotate(45deg);  
  100.   border-width: 2px;  
  101.   border-style: solid;  
  102.   border-color: #fff;  
  103.   border-top: 0;  
  104.   border-left: 0; }  
  105.   
  106. .magic-checkbox:checked + label:before {  
  107.   border: #3e97eb;  
  108.   background: #3e97eb; }  
  109.   
  110. .magic-checkbox:checked[disabled] + label:before {  
  111.   border: #c9e2f9;  
  112.   background: #c9e2f9; }  

 


原文地址:http://www.freejs.net/article_biaodan_641.html