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

Question

提问by user3185936

Wondering if its possible to change the size of checkbox as it's possible with buttons. I want it to be bigger, so it makes it easy to press. Right now its looking like this:

想知道是否可以像使用按钮那样更改复选框的大小。我希望它更大，以便于按下。现在它看起来像这样：

enter image description here

在此处输入图片说明

Code:

代码：

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

Answer 1

回答by Rachel S

Or you can style it with pixels.

或者您可以使用像素对其进行样式设置。

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

Answer 2

回答by SANA

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

Answer 3

回答by Companjo

It is possible in css, but not for all the browsers.

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

The effect on all browsers:

在所有浏览器上的效果：

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

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

A possibility is a custom checkbox with javascript:

一种可能性是带有 javascript 的自定义复选框：

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

Answer 4

回答by Artru

It is possible to implement custom bootstrap checkbox for the most popular browsers nowadays.

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

You can check my Bootstrap-Checkboxproject in GitHub, which contains simple .less file. There is a good articlein MDN describing some techniques, where the two major are:

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

Label redirects a click event.
Label can redirect a click event to its target if it has the forattribute like in <label for="target_id">Text</label> <input id="target_id" type="checkbox" />, or if it contains input as in Bootstrap case: <label><input type="checkbox" />Text</label>.
It means that it is possible to place a label in one corner of the browser, click on it, and then the label will redirect click event to the checkbox located in other corner producing check/uncheck action for the checkbox.
We can hide original checkbox visually, but make it is still working and taking click event from the label. In the label itself we can emulate checkbox with a tag or pseudo-element :before :after.
General non supported tag for old browsers
Some old browsers does not support several CSS features like selecting siblings p+por specific search input[type=checkbox]. According to the MDN article browsers that support these features also support :rootCSS selector, while others not. The :rootselector just selects the root element of a document, which is htmlin a HTML page. Thus it is possible to use :rootfor a fallback to old browsers and original checkboxes.
Final code snippet:

标签重定向点击事件。
如果 Label 具有for类似 in的属性 <label for="target_id">Text</label> <input id="target_id" type="checkbox" />，或者如果它包含 Bootstrap case: 中的输入，则Label 可以将单击事件重定向到其目标<label><input type="checkbox" />Text</label>。
这意味着可以在浏览器的一个角落放置一个标签，点击它，然后标签会将点击事件重定向到位于另一个角落的复选框，为该复选框生成选中/取消选中操作。
我们可以在视觉上隐藏原始复选框，但让它仍然工作并从标签中获取点击事件。在标签本身中，我们可以使用标签或伪元素来模拟复选框:before :after。
旧浏览器一般不支持的标签
一些旧浏览器不支持一些 CSS 功能，例如选择兄弟姐妹p+p或特定搜索input[type=checkbox]。根据 MDN 文章，支持这些功能的浏览器也支持:rootCSS 选择器，而其他的则不支持。所述: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>

Answer 5

回答by Alex

I used just "save in zoom", in example:

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

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

Answer 6

回答by DropHit

I have used this library with sucess

我已经成功地使用了这个库

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

It requires jQuery and bootstrap 3.x

它需要 jQuery 和 bootstrap 3.x

Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

在此处下载 zip：https: //github.com/kartik-v/bootstrap-checkbox-x/zipball/master

Put the contents of the zip in a folder within your project

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

Pop the needed libs in your header

在您的标题中弹出所需的库

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

Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo

使用 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"/>

There are numerous other features as well if you browse the plugin site.

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

Answer 7

回答by SANA

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

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

提问by user3185936

回答by Rachel S

回答by SANA

回答by Companjo

回答by Artru

回答by Alex

回答by DropHit

回答by SANA

相关推荐

最近更新

标签

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

提问by user3185936

回答by Rachel S

回答by SANA

回答by Companjo

回答by Artru

回答by Alex

回答by DropHit

回答by SANA

相关推荐

CSS 如何从标题中删除粗体？

CSS 单元格中表格上的文本对齐（<td> 内的<table>）

CSS Bootstrap 折叠菜单在展开时不会向下推内容

CSS 如何在 Twitter Bootstrap 中覆盖样式

相关推荐

最近更新

标签