如何更改 Bootstrap 复选框的大小？

想知道是否有可能改变复选框的大小，因为它可能与按钮。我想要大一点，这样压起来更方便。现在看起来是这样的:

enter image description here

密码:

 <div class="form-group">
<label  class="col-md-7 control-label">Kalsiumklorid: </label>
<div class="col-md-5" >
{{ Form::checkbox('O_Kals_Klor', 1 , array('class' => 'form-control' ))  }}
</div>
</div>
231116 次浏览
小开

这在 css 中是可能的，但不是所有的浏览器都适用。

对所有浏览器的影响:

Http://www.456bereastreet.com/lab/form_controls/checkboxes/

一种可能性是使用 javascript 的自定义复选框:

Http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

小开

或者你可以用像素来设计。

 .big-checkbox {width: 30px; height: 30px;}
小开

我成功地利用了这个图书馆

Http://plugins.krajee.com/checkbox-x

它需要 jQuery 和 bootstrap 3. x

在这里下载压缩文件: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

将 zip 的内容放在项目中的一个文件夹中

在页眉中弹出所需的库

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

使用 data-size = “ xl”将数据控件添加到元素中，以更改大小，如下面的 http://plugins.krajee.com/cbx-sizes-demo所示

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

如果你浏览插件站点，还有许多其他的特性。

小开

现在可以为最流行的浏览器实现自定义引导复选框。

您可以在 GitHub 中检查我的 Bootstrap-复选框项目，它包含简单的 。较少的文件。 MDN 中有一个 文章不错描述了一些技术，其中两个主要技术是:

  1. 标签重定向点击事件。

    如果 Label 具有 for属性(如 <label for="target_id">Text</label> <input id="target_id" type="checkbox" />) ，或者如果它包含 Bootstrap case: <label><input type="checkbox" />Text</label>中的输入，那么它可以将单击事件重定向到目标。

    这意味着可以在浏览器的一个角落放置一个标签，单击它，然后标签会将单击事件重定向到位于另一个角落的复选框，为该复选框产生复选/取消复选操作。

    我们可以 可视化地隐藏原始复选框，但使它仍然工作和 从标签中获取 click 事件。在标签本身中，我们可以使用标记或伪元素 :before :after来模拟复选框。

  2. 旧浏览器通常不支持标记

    一些旧的浏览器不支持一些 CSS 特性，如选择兄弟 p+p或特定的搜索 input[type=checkbox]。根据 MDN 的文章浏览器，支持这些特性也支持 :root CSS 选择器，而其他的不支持。:root选择器只选择文档的根元素，即 HTML 页面中的 html。因此，可以使用 :root回退到旧的浏览器和原始复选框。

    最后的代码片段:

:root {
/* larger checkbox */
}
:root label.checkbox-bootstrap input[type=checkbox] {
/* hide original check box */
opacity: 0;
position: absolute;
/* find the nearest span with checkbox-placeholder class and draw custom checkbox */
/* draw checkmark before the span placeholder when original hidden input is checked */
/* disabled checkbox style */
/* disabled and checked checkbox style */
/* when the checkbox is focused with tab key show dots arround */
}
:root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-placeholder {
width: 14px;
height: 14px;
border: 1px solid;
border-radius: 3px;
/*checkbox border color*/
border-color: #737373;
display: inline-block;
cursor: pointer;
margin: 0 7px 0 -20px;
vertical-align: middle;
text-align: center;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder {
background: #0ccce4;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder:before {
display: inline-block;
position: relative;
vertical-align: text-top;
width: 5px;
height: 9px;
/*checkmark arrow color*/
border: solid white;
border-width: 0 2px 2px 0;
/*can be done with post css autoprefixer*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}
:root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-placeholder {
background: #ececec;
border-color: #c3c2c2;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-placeholder {
background: #d6d6d6;
border-color: #bdbdbd;
}
:root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-placeholder {
outline: 1px dotted black;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-placeholder {
width: 26px;
height: 26px;
border: 2px solid;
border-radius: 5px;
/*checkbox border color*/
border-color: #737373;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-placeholder:before {
width: 9px;
height: 15px;
/*checkmark arrow color*/
border: solid white;
border-width: 0 3px 3px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>
Original checkboxes:
</p>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox">
<span class="checkbox-placeholder"></span>
Original checkbox
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox" disabled>
<span class="checkbox-placeholder"></span>
Original checkbox disabled
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox" checked>
<span class="checkbox-placeholder"></span>
Original checkbox checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox" checked disabled>
<span class="checkbox-placeholder"></span>
Original checkbox checked and disabled
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap checkbox-lg">
<input type="checkbox">
<span class="checkbox-placeholder"></span>
Large checkbox unchecked
</label>
</div>
<br/>
<p>
Inline checkboxes:
</p>
<label class="checkbox-inline checkbox-bootstrap">
<input type="checkbox">
<span class="checkbox-placeholder"></span>
Inline
</label>
<label class="checkbox-inline checkbox-bootstrap">
<input type="checkbox" disabled>
<span class="checkbox-placeholder"></span>
Inline disabled
</label>
<label class="checkbox-inline checkbox-bootstrap">
<input type="checkbox" checked disabled>
<span class="checkbox-placeholder"></span>
Inline checked and disabled
</label>
<label class="checkbox-inline checkbox-bootstrap checkbox-lg">
<input type="checkbox" checked>
<span class="checkbox-placeholder"></span>
Large inline checked
</label>

小开

例如，我只使用了“保存缩放”:

.my_checkbox {
width:5vw;
height:5vh;
}
小开 
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
小开 
<div id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</div>
//do this on the css
div label input { margin-right:100px; }
小开

下面的作品在引导4和显示在 CSS，移动和没有问题的标签间距良好。

enter image description here

CSS

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
top: .8rem;
width: 1.55rem;
height: 1.55rem;
}


.checkbox-lg .custom-control-label {
padding-top: 13px;
padding-left: 6px;
}




.checkbox-xl .custom-control-label::before,
.checkbox-xl .custom-control-label::after {
top: 1.2rem;
width: 1.85rem;
height: 1.85rem;
}


.checkbox-xl .custom-control-label {
padding-top: 23px;
padding-left: 10px;
}

超文本标示语言

<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="checkbox-3">
<label class="custom-control-label" for="checkbox-3">Large checkbox</label>
</div>

还可以通过声明 checkbox-xl使其变得特别大

如果来自 BS 团队的任何人正在阅读这篇文章，它将是非常好的，如果你使这个可用的盒子，我没有看到它在 BS 5的任何东西

来源

小开

使用简单的 css

.big-checkbox {width: 1.5rem; height: 1.5rem;top:0.5rem}
小开

这就是你帮我解决的问题:

.checkbox-xl .form-check-input
{
scale: 2.5;
}
.checkbox-xl .form-check-label
{
padding-left: 25px;
}
<div class="form-check checkbox-xl">
<input class="form-check-input" type="checkbox" value="1" id="checkbox-3" name="check1"/>
<label class="form-check-label" for="checkbox-3">Etiqueta</label>
</div>


提交答案