1

How can I increase the width and height of a checkbox? I tried to increase the width and height inside .list-group input[type="checkbox"] + label:before based on other examples but the size of the box is not changing. 

<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
}
johannchopin
  • 13,720
  • 10
  • 55
  • 101
HJ1990
  • 385
  • 1
  • 4
  • 19

1 Answers1

1

Add display: inline-block; into .list-group input[type="checkbox"] + label:before.

Faris Han
  • 525
  • 3
  • 16