html自定义radio样式,css自定义radio和checkbox样式

先说好处吧，样式好看(至少比默认样式好看)，不会有兼容问题，设置简单，使用方便。

html代码：

radio1

radio2

checked1

checked2

checked3

原始效果.png

添加css效果

.radio-box {

position: relative;

width: 200px;

height: 70px;

border: 1px solid #000;

}

.radio-box input[type=radio],

.radio-box input[type=checkbox]{

width: 20px;

height: 20px;

opacity: 0;

}

.radio-box input:checked+label.radio-stype {

background-color: #07A9FF;

border: 1px solid #07A9FF;

}

.radio-box label.radio-stype {

position: absolute;

top: 50%;

left: 20px;

width: 18px;

height: 18px;

margin-top: -9px;

border-radius: 50%;

border: 1px solid #9EA2A3;

text-indent: 20px;

}

.radio-box input:checked+label.radio-stype::after {

position: absolute;

content: "";

width: 4px;

height: 9px;

top: 2px;

left: 6px;

border: 2px solid #fff;

border-top: none;

border-left: none;

transform: rotate(45deg);

}

设置后效果.png

思路：通过隐藏radio和checkbox的原始样式(opacity: 0)，设置label以及label的伪元素实现圆框以及选中的√。