css 复选框怎么设置

CSS复选框是网页中常用的交互元素，用来让用户在一组选项中进行多项选择。在HTML中，我们可以使用input标签的type属性来创建复选框。

input type="checkbox" name="fruit" value="apple">
    Appleinput type="checkbox" name="fruit" value="banana">
    Bananainput type="checkbox" name="fruit" value="orange">
Orange

上面的代码创建了一个水果选择表单，用户可以选择多种水果。但是，这样的复选框在样式上可能不够美观，我们可以使用CSS来对其进行修饰。

首先，我们可以使用伪元素:before和:after来创建自定义的复选框图标，并使用position和content属性来设置其位置和内容。

input[type="checkbox"] {
        position: absolute;
        opacity: 0;
}
input[type="checkbox"] + label:before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
        border: 1px solid #999;
        border-radius: 3px;
        background-color: #fff;
}
input[type="checkbox"]:checked + label:before {
        content: "2713";
        color: #007bff;
        text-align: center;
}
    

上面的代码中，我们使用了相邻兄弟选择器和伪元素:before来选择复选框和其相邻的label元素，并使用position和opacity属性来将复选框隐藏。通过:before伪元素的content属性，我们创建了一个空心圆形，并设置了其边框和背景色。

当复选框被选中时，我们可以使用:checked伪类和label:before选择已选中的复选框，并使用content属性将圆形变为勾号，并更改其颜色。

另外，我们还可以使用label元素来创建复选框的文本描述，并使用for属性关联复选框的id属性，使得文本可以点击来选中复选框。

input type="checkbox" id="apple" name="fruit" value="apple">
    label for="apple">
    Apple/label>
    

最终，我们得到了一个美观的自定义复选框：

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