css重写单选框和复选框样式

**************************第一种样式开始************************************/

css:

/*单选样式重写*/
input[type='radio'].radio {opacity:0;position: absolute;}
label.radio {cursor: pointer; font-size:14px;min-width:80px;display:block; -webkit-appearance: none;background-color:#FAFAFA;border:1px solid #CCCCCC;color: #333333;height:28px;line-height: 28px;margin: 5px; text-align: center;padding: 0 5px;}
input[type='radio'].radio:checked + .radio {background-color:#2095F2;border:1px solid #2095F2;color: #fff;}
/*多选样式重写*/
input[type='checkbox'].checkbox {opacity:0;position: absolute;}
label.checkbox {position: relative; cursor: pointer; font-size:14px;min-width:80px;display:block; -webkit-appearance: none;background-color:#FAFAFA;border:1px solid #CCCCCC;color: #333333;height:28px;
               line-height: 28px;margin: 5px; text-align: center;padding: 0 35px 0 5px;}
input[type='checkbox'].checkbox:checked + .checkbox {background-color:#2095F2;border:1px solid #2095F2;color: #fff;}
label.checkbox:before{position: absolute; content: " ";right: 0;background:url(../img/i_check.png) center center;width: 28px;height: 28px;border-left: 1px solid #CCCCCC;background-size: 28px 28px;}

input[type='checkbox'].checkbox:checked + .checkbox:before {background:url(../img/i_checked.png) center center;border-left: 1px solid #2095F2;}

页面：

随访内容：

1、膳食原则遵守情况

• 
  
  是
  


• 
  
  否
  

2、选用的膳食处方（可多选）

• 
  
  处方A
  


• 
  
  处方B
  


• 
  
  处方C
  


• 
  
  处方D
  


• 
  
  其他
  


• 
  
  
  

**************************第一种样式结束************************************/   

**************************第二种样式开始************************************/

css:

/*复选样式重写*/
.table_style{display: inline-block;margin: 0px 10px;color: #666;}
.choicebox{display: inline-block;margin: 0px 10px;color: #666;}
input[type="checkbox"] {
  -webkit-appearance: none;
  background:url(../img/bg_icon.png) no-repeat;
  height:18px; 
  vertical-align: middle;
  width: 20px;
}
input[type="checkbox"]:checked {background-position: -20px 0;}
/*单选样式重写*/
input[type="radio"] {
  -webkit-appearance: none;
  background:url(../img/bg_icon.png) no-repeat;
  height:18px; 
  vertical-align: middle;
  width: 20px;
  background-position: -154px -2px;
}

input[type="radio"]:checked {background-position: -130px -2px;}

/*页面*/

**************************第二种样式结束************************************/