css 单选做成多选样式

CSS 单选框可以通过少量的 CSS 样式和 HTML 结构变成任意数量的多选框。我们使用伪元素 :before 和 :after 来创建多个复选框。

.checkbox {
       position: relative;
       display: block;
       width: 25px;
       height: 25px;
       background-color: #fff;
       border: solid 2px #ccc;
       border-radius: 5px;
       margin-bottom: 10px;
}
.checkbox:before, .checkbox:after {
       position: absolute;
       content: "";
       display: block;
}
.checkbox:before {
       top: 4px;
       left: 8px;
       width: 12px;
       height: 4px;
       border: solid 2px currentColor;
       border-radius: 2px;
       transform: rotate(-45deg);
}
.checkbox:after {
       top: 11px;
       left: 2px;
       width: 4px;
       height: 10px;
       border: solid 2px currentColor;
       border-radius: 2px;
       transform: rotate(45deg);
}
.checkbox input[type="checkbox"] {
       opacity: 0;
}
.checkbox input[type="checkbox"]:checked + label:before {
       border-color: green;
}
.checkbox input[type="checkbox"]:checked + label:after {
       border-color: green;
}
    

我们使用了一个 .checkbox 类来包装单选框并将其样式化。 :before 和 :after 伪元素用于创建新的 divs 来模拟多项选择框。我们使用 transform 属性来旋转伪元素的角度。

当单选框被选中时，其对应的 label> 元素的 :before 和 :after 伪类都会变成绿色。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！