在引导程序中更改复选框的大小

Question

我尝试在引导程序中更改复选框的大小。我是这样尝试的：

css:

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

HTML 引导程序：

  <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;}