Question

如何增加复选框的宽度和高度？我尝试根据其他示例在 .list-group input [type =“ checkbox”] + label：before 中增加宽度和高度，但是框的大小没有变化。

<ul class="list-group ml-3 mr-3 mt-1 " style="background-color:pink; height:auto">

    <li class="list-group-item d-flex p-0 border-0 ">
        <input style="background-color:yellow" class="" type="checkbox" id="CheckBox1" />
        <label style="font-size: 15px;"class="list-group-item w-100 p-0 border-0" for="CheckBox1">Caption asdsad asdasd </label>
    </li>

</ul>

/* Hide the browser's default checkbox */
.list-group input[type="checkbox"] {
    display: none;
}       

.list-group input[type="checkbox"] + label:before {
    content: "\2714";
    border: 0.1em solid #000;
    margin-right: 10px;
    color: transparent;
    width: 10px; // this is not working
    height: 20px; // this is not working
}

Answer 1

将display: inline-block;添加到.list-group input[type="checkbox"] + label:before中。

增加复选框大小

1 个答案: