在boostrap中更改复选框的大小

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/

您可以使用这个插件来引导：http://plugins.krajee.com/checkbox-x/demo

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

Answer 2

试试这样：

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