首页>>表单>>radio单选框彩色,自定义边框,圆点颜色和大小(2017-10-25)

radio单选框彩色,自定义边框,圆点颜色和大小

本例是《纯css checkbox复选框与radio单选框美化》的扩展,这边就修改了一下css文件,仅仅展示radio单选框

本例主要就是自定义边框的颜色,大小,另外可以每个radio选项单独定义

radio单选框彩色,自定义边框,圆点颜色和大小

 

XML/HTML Code
  1. <div class="col">  
  2.             <h4>Radio(单选按钮)</h4>  
  3.               
  4.                 <input class="magic-radio" type="radio" name="radio" id="r1" value="option1">  
  5.                 <label for="r1" class="radio1">Normal</label>  
  6.               
  7.           
  8.               
  9.                 <input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked>  
  10.                 <label for="r2" class="radio2">Checked</label>  
  11.               
  12.                 <input class="magic-radio" type="radio" name="radio" id="r3" value="option3">  
  13.                 <label for="r3" class="radio3">Normal</label>  
  14.               
  15.         </div>  

 

CSS Code
  1. .magic-radio {  
  2.   positionabsolute;  
  3.   displaynone; }  
  4.   
  5.   
  6.   
  7. .magic-radio + label {  
  8.   positionrelative;  
  9.   padding-left30px;  
  10.   cursorpointer;  
  11.   vertical-alignmiddle; }  
  12.   .magic-radio + label:hover:before {  
  13.     animation-duration: 0.4s;  
  14.     animation-fill-mode: both;  
  15.     animation-name: hover-color; }  
  16.   .magic-radio + label.radio1:before {  
  17.     positionabsolute;  
  18.     top: 0;  
  19.     left: 0;  
  20.     displayinline-block;  
  21.     width20px;  
  22.     height20px;  
  23.     content'';  
  24.     border2px solid #478846; }  
  25.     .magic-radio + label.radio2:before {  
  26.     positionabsolute;  
  27.     top: 0;  
  28.     left: 0;  
  29.     displayinline-block;  
  30.     width20px;  
  31.     height20px;  
  32.     content'';  
  33.     border2px solid #C30C22; }  
  34.     .magic-radio + label.radio3:before {  
  35.     positionabsolute;  
  36.     top: 0;  
  37.     left: 0;  
  38.     displayinline-block;  
  39.     width20px;  
  40.     height20px;  
  41.     content'';  
  42.     border2px solid #868686; }  
  43.   .magic-radio + label:after {  
  44.     positionabsolute;  
  45.     displaynone;  
  46.     content''; }  
  47.   
  48. .magic-radio[disabled] + label {  
  49.   cursor: not-allowed;  
  50.   color#e4e4e4; }  
  51.  .magic-radio:checked + label:before {  
  52.   animation-name: none; }  
  53.   
  54. .magic-radio:checked + label:after {  
  55.   displayblock; }  
  56.   
  57. .magic-radio + label:before {  
  58.   border-radius: 50%; }  
  59. .magic-radio + label.radio1:after {  
  60.   top6px;  
  61.   left6px;  
  62.   width12px;  
  63.   height12px;  
  64.   border-radius: 50%;  
  65.   background#478846; }  
  66.   
  67. .magic-radio + label.radio2:after {  
  68.   top6px;  
  69.   left6px;  
  70.   width12px;  
  71.   height12px;  
  72.   border-radius: 50%;  
  73.   background#00ff00; }  
  74. .magic-radio + label.radio3:after {  
  75.   top6px;  
  76.   left6px;  
  77.   width12px;  
  78.   height12px;  
  79.   border-radius: 50%;  
  80.   background#868686; }  

 


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