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

Question

想知道是否可以像按钮一样改变复选框的大小。我希望它更大，这样更容易按下。现在它看起来像这样：

代码:

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

- user3185936

---

可能是重复问题，请看一下，可以帮助你解决问题。https://dev59.com/hWYr5IYBdhLWcg3wfaSc - brobken

你的意思是“就像使用按钮一样可能吗？” - Andrew Grimm

https://stackoverflow.com/questions/57805394/how-to-change-size-of-icheck-checkbox-and-add-border-radius/57805647?noredirect=1#comment102043290_57805647 - Pritesh

Answer 1

或者你可以使用像素来进行样式设置。

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

- Rachel S

---

在谷歌浏览器上可以运行但在火狐浏览器上不行 :( 测试就到这里了。 - John

@John 我只在手机上使用它，因为默认的复选框大小对于手指来说太小了，不太容易点击。而且我试过的移动浏览器都可以正常使用。 - Rachel S

@John 感谢你，因为你的建议，我没有再试这个方法。我只是在复选框的上面和下面添加了额外的空间，使它更加显眼。 - Gellie Ann

在Firefox中强制设置宽度/高度是有效的，但您需要同时设置两者，否则您将只得到所设置的宽度/高度的填充间隙。 - Andrew West

Answer 2

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

- SANA

---

这是一个不错的解决方案，但我在复选框和标签之间的间距上遇到了问题。 - Martin

在标签前加上1或2个空格 :-) - rafal chlopek

这会在Chrome for iPhone上创建复选框问题，它们变得几倍大。有什么解决方法吗？ - bo-oz

在 Safari（Mac）上进行动画时效果还是不错的，但会稍微有点像素化。 - BSUK

我注意到只使用scale的问题是它也会增加复选框边框的厚度，这并不总是理想的。 - Aaron Wallentine

Answer 3

在 CSS 中有可能实现，但并非所有浏览器都支持。

各个浏览器的效果：

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

一种可能性是使用 JavaScript 自定义复选框：

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

- Companjo

---

谢谢，使用JavaScript如何增加此复选框的大小：http://jsfiddle.net/M5B3a/ - user3185936

Answer 4

以下代码适用于 Bootstrap 4，样式在 CSS 和移动端上显示良好，并且标签间距没有问题。

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

HTML

<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中也没有看到任何内容。

来源

- Robert Sinclair

Answer 5

现在可以为大多数流行的浏览器实现自定义bootstrap复选框。

您可以查看我在GitHub上的Bootstrap-Checkbox项目，其中包含简单的.less文件。 MDN上有一篇好文章描述了一些技术，其中两个主要技术是：

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

   如果标签具有for属性，例如<label for="target_id">Text</label> <input id="target_id" type="checkbox" />，或者包含输入框（如Bootstrap的情况）：<label><input type="checkbox" />Text</label>，则标签可以将点击事件重定向到其目标。

   这意味着我们可以在浏览器的一个角落放置一个标签，单击它，然后标签将重定向点击事件到位于其他角落的复选框，从而产生对复选框的选中/取消选中操作。

   我们可以在视觉上隐藏原始复选框，但使其仍然工作并接收来自标签的点击事件。在标签本身中，我们可以使用标签或伪元素:before :after来模拟复选框。

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

   一些旧浏览器不支持选择兄弟元素p+p或特定搜索input[type=checkbox]等几个CSS功能。根据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>

- Artur A

---

太棒了。运行得非常好。谢谢。 - usert4jju7

Answer 6

我只是使用“保存在缩放”功能，例如：

.my_checkbox {
    width:5vw;
    height:5vh;
}

- Alex

---

简单而有效的答案 - Zeke

这在移动视口中效果不佳。 - MAXE

Answer 7

只需使用简单的CSS

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

- BJ Coder

---

谢谢您使用rem而不是px单位... - Aaron Wallentine

Answer 8

Aqui lo que me ayudo a solucionarlo:

.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>

- Gustavo Blanco

Answer 9

我已成功使用过这个库。

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

需要 jQuery 和 bootstrap 3.x。

在此处下载 zip 文件：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"/>

如果您浏览插件网站，还有许多其他功能。

- DropHit

Answer 10

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

- SANA