在boostrap中更改复选框的大小

时间:2016-08-30 07:57:40

标签: css asp.net-mvc twitter-bootstrap

我尝试在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" />

    }

但我没有看到改变大小。

2 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:1)

试试这样:

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