选项对勾css

在前端开发中，勾选框是常见的控件之一。常常我们需要自定义选项对勾的样式，这时候就需要用到CSS。

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid #aaa;
    background-color: #fff;
    box-sizing: border-box;
}
input[type="checkbox"]:checked + label:before {
    content: "\2713";
    color: #fff;
    background-color: #333;
    text-align: center;
    line-height: 16px;
}

首先，我们需要将原生的input勾选框设置为不可见。input[type="checkbox"] { display: none; }

然后，我们自定义其样式，使用元素作为其外壳，使用:before伪元素来实现对勾的效果。

input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid #aaa;
    background-color: #fff;
    box-sizing: border-box;
}

最后，我们为选中的状态设置对勾的样式。

input[type="checkbox"]:checked + label:before {
    content: "\2713";
    color: #fff;
    background-color: #333;
    text-align: center;
    line-height: 16px;
}
    

这里使用了ASCII码中的“✓”符号来实现对勾的效果，使用text-align和line-height来使其垂直居中。

如此一来，我们就可以自定义选项对勾的样式了。

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