首页>>表单>>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.   position: absolute;  
  3.   display: none; }  
  4.   
  5.   
  6.   
  7. .magic-radio + label {  
  8.   position: relative;  
  9.   padding-left: 30px;  
  10.   cursor: pointer;  
  11.   vertical-align: middle; }  
  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.     position: absolute;  
  18.     top: 0;  
  19.     left: 0;  
  20.     display: inline-block;  
  21.     width: 20px;  
  22.     height: 20px;  
  23.     content: '';  
  24.     border: 2px solid #478846; }  
  25.     .magic-radio + label.radio2:before {  
  26.     position: absolute;  
  27.     top: 0;  
  28.     left: 0;  
  29.     display: inline-block;  
  30.     width: 20px;  
  31.     height: 20px;  
  32.     content: '';  
  33.     border: 2px solid #C30C22; }  
  34.     .magic-radio + label.radio3:before {  
  35.     position: absolute;  
  36.     top: 0;  
  37.     left: 0;  
  38.     display: inline-block;  
  39.     width: 20px;  
  40.     height: 20px;  
  41.     content: '';  
  42.     border: 2px solid #868686; }  
  43.   .magic-radio + label:after {  
  44.     position: absolute;  
  45.     display: none;  
  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.   display: block; }  
  56.   
  57. .magic-radio + label:before {  
  58.   border-radius: 50%; }  
  59. .magic-radio + label.radio1:after {  
  60.   top: 6px;  
  61.   left: 6px;  
  62.   width: 12px;  
  63.   height: 12px;  
  64.   border-radius: 50%;  
  65.   background: #478846; }  
  66.   
  67. .magic-radio + label.radio2:after {  
  68.   top: 6px;  
  69.   left: 6px;  
  70.   width: 12px;  
  71.   height: 12px;  
  72.   border-radius: 50%;  
  73.   background: #00ff00; }  
  74. .magic-radio + label.radio3:after {  
  75.   top: 6px;  
  76.   left: 6px;  
  77.   width: 12px;  
  78.   height: 12px;  
  79.   border-radius: 50%;  
  80.   background: #868686; }  

 


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