html radio 默认图片替换_用纯css改变默认的radio和checkbox的样式

效果图:

效果图

利用css的label的伪类(::before)代替checkbox和radio效果:

优点：需要图片来调整选中前和选中后的样式，纯css搞定

缺点：兼容性，IE8以下不支持

代码:

css改变默认的radio和checkbox的样式

input[type="radio"],

input[type='checkbox'] {

display: none;

}

input[type='radio']+label::before,

input[type='checkbox']+label::before {

content: '';

display: inline-block;

width: 15px;

height: 15px;

margin-right: 6px;

border-radius: 100%;

vertical-align: middle;

border: 1px solid #E4E4E4;

background: #FFFFFF;

background-image: url('https://i.loli.net/2018/07/20/5b517d0bf066a.png');

background-position: 0px 0px;

}

input[type='radio']:hover+label::before,

input[type='checkbox']:hover+label::before {

background-position: -15px 0px;

}

input[type='radio']:checked+label::before,

input[type='checkbox']:checked+label::before {

background-position: -15px -15px;

}

单选框

男

女

多选框

苹果

橙子