checkbox、radio样式小技巧

对于input中checkbox和radio，一般都是使用javascript控制其选中后的样式。在css有了“:checked”伪类选择器后，还能这么玩。

//css
.checkbox-container{
    position: relative;
}
.checkbox-container .checkbox-item{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkbox-container .checkbox-label::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 50%;
}
.checkbox-container .checkbox-item:checked + .checkbox-label::before{
    content: "√";
    background: #0099ff;
    color: #fff;
}
//html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!