css - 更改 Bootstrap 中复选框的大小

Question

我尝试在 Bootstrap 中更改复选框的大小。我这样尝试:

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" />

    }

但我没有看到更改大小。

Answer 1

您无法使用宽度和高度更改输入复选框的尺寸。以这种方式更改点击区域但复选框保持不变。你可以使用这个:

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

查看差异:https://jsfiddle.net/88v0gq20/

您可以使用此插件进行 Bootstrap :http://plugins.krajee.com/checkbox-x/demo

或者您可以像本教程中那样创建自定义复选框:https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes