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;}

页面：

<div class="layer_return_content">
<h4 class="layer_title2">随访内容：</h4>
<div class="layer_choose2">
<label class="layer_choose_title">1、膳食原则遵守情况</label>
<ul class="layer_choose_item">
<li>
<input type="radio" name="goodsReceived" id="goodsReceived1" value="1" class="radio">
<label class="radio" for="goodsReceived1">是</label>
</li>
<li>
<input type="radio" name="goodsReceived" id="goodsReceived2" value="2" class="radio">
<label class="radio" for="goodsReceived2">否</label>
</li>
</ul>
</div>
<div class="layer_choose2">
<label class="layer_choose_title">2、选用的膳食处方<span>（可多选）</span></label>
<ul class="layer_choose_item">
<li>
<input type="checkbox" name="dietaryPres" id="dietaryPres1" value="1" class="checkbox">
<label class="checkbox" for="dietaryPres1">处方A</label>
</li>
<li>
<input type="checkbox" name="dietaryPres" id="dietaryPres2" value="2" class="checkbox">
<label class="checkbox" for="dietaryPres2">处方B</label>
</li>
<li>
<input type="checkbox" name="dietaryPres" id="dietaryPres3" value="3" class="checkbox">
<label class="checkbox" for="dietaryPres3">处方C</label>
</li>
<li>
<input type="checkbox" name="dietaryPres" id="dietaryPres4" value="4" class="checkbox">
<label class="checkbox" for="dietaryPres4">处方D</label>
</li>
<li>
<input type="checkbox" name="dietaryPres" id="dietaryPres5" value="5" class="checkbox">
<label class="checkbox" for="dietaryPres5">其他</label>
</li>
<li>
<div class="layer_answerw180"><input type="text" placeholder="选择其他后可输入" class="layer_control_input" /></div>
</li>
</ul>
</div>

</div>

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

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

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;}

/*页面*/

<input type="checkbox" />

<input type="radio" />

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