html单选框样式复写,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;}

/*页面*/

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