change size of checkbox in boostrap

Question

I try to change the size of a checkbox in bootstrap. I try it like this:

css:

   .big-checkbox {width: 100px; height: 100px;}

HTML bootstrap:

  <label class="big-checkbox">
            <input type="checkbox" name="optradio">Reeks
        </label>

@section scripts{
    <link href="@Url.Content("~/Content/Stickerprinter.css")" rel="stylesheet" type="text/css" />

    }

But I dont see changing the size.

Solution 1

Try like this :

  .big-checkbox  > input {width: 100px; height: 100px;}

Solution 2

Using width and height you can't change the dimensions of an input checkbox. In this way change the area of click but checkbox remain the same. You can use this:

input[type=checkbox] {
  transform: scale(1.5);
}

Check the difference: https://jsfiddle.net/88v0gq20/

You can use for bootstrap this plugin: http://plugins.krajee.com/checkbox-x/demo

Or you could create custom checkbox like in this tutorial: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes