css3 radio checkbox 自定义

// 自定义radio样式-大单选框

input[ type= radio] {

position: relative;

-webkit-appearance: none;

box-sizing: border-box;

appearance: none;

width: 18px;

height: 18px;

vertical-align: middle;

background: url( ./assets/common/radio-check.png) no-repeat center;

background-size: 100% 100%;

cursor: pointer;

& :disabled {

background: url( ./assets/common/radio-disabled.png) no-repeat center;

background-size: 100% 100%;

}

& :disabled:checked::after {

content: '';

position: absolute;

background: url( ./assets/common/radio-checked-disabled.png) no-repeat center;

background-size: 100% 100%;

width: 18px;

height: 18px;

z-index: 101;

}

& :checked::after {

content: '';

position: absolute;

background: url( ./assets/common/radio-checked.png) no-repeat center;

background-size: 100% 100%;

width: 18px;

height: 18px;

z-index: 101;

}

}

*自定义checbox样式*/

// 小复选框

input[ type= checkbox] {

position: relative;

box-sizing: border-box;

appearance: none;

width: 14px;

height: 14px;

vertical-align: middle;

background: url( ./assets/common/checkbox-sm-check.png) no-repeat;

background-size: 14px;

cursor: pointer;

& :checked {

background: #fff

}

& :disabled {

background: url( ./assets/common/checkbox-sm-disabled.png) no-repeat;

}

& :checked::after {

content: "";

position: absolute;

display: block;

background: url( ./assets/common/checkbox-sm-checked.png);

width: 14px;

height: 14px;

background-size: 14px;

}

& .notall::after {

content: "";

position: absolute;

display: block;

background: url( ./assets/common/checkbox-sm-notall.png);

width: 14px;

height: 14px;

background-size: 14px;

}

& :disabled:checked::after {

content: "";

position: absolute;

display: block;

background: url( ./assets/common/checkbox-sm-checked-disabled.png);

width: 14px;

height: 14px;

background-size: 14px;

}

}