checkradio选择框样式修改为圆圈⽅案
html radio点击变颜
check/radio选择框样式修改为圈圈
选中为点
html：
<div className="checkbox-area">
<input type="checkbox" name="chooseType" id="chooseType1" className="Checkbox" onChange={() => Change(0)}/>              <label htmlFor="chooseType1" className="checkbox-label" style={{ display: 'inline-block'}}></label>
<div>通过</div>
</div>
<div className="checkbox-area">
<input type="checkbox" name="chooseType" id="chooseType2" className="Checkbox" onChange={()
=> Change(1)}/>              <label htmlFor="chooseType2" className="checkbox-label" style={{ display: 'inline-block'}}></label>
<div>待审核</div>
</div>
css：
如果是radio就把checkbox修改为radio
.checkbox-area{
width: 80px;
position: relative;
display: flex;
label {
left: -1px;
top: 8px;
border-radius: 50%;
border: 1px solid #c60c20;
}
.checkbox-label{
width: 15px;
height: 15px;
margin-top: 12px;
}
input[type="checkbox"] {
width: 10px;
height: 20px;
opacity: 0;
}
input:checked+label {
border: 1px solid #c60c20;
}
input[type="checkbox"]:checked+label::before {      border: 1px solid #c60c20;
background-color: #c60c20;
background-clip: content-box;
width: 5px;
}
input[type="checkbox"]+label::before {
content: "\a0";
display: inline-block;
vertical-align: middle;
font-size: 16px;
width: 8px;
height: 5px;
border-radius: 50%;
margin: -28px 4px 0 4px;
}
div{
margin-left: 3px;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。