複選框引導程序的大小

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> 

Answer 1

有可能在CSS，但不是所有的瀏覽器。

在所有瀏覽器的影響：

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

一種可能性是使用javascript自定義複選框：

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

Answer 2

或者你可以用像素樣式。

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

Answer 3

我已經使用sucess這個庫

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

它需要jQuery和引導3.x的

在這裏下載ZIP：https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

放的內容在您的項目中的文件夾中拉鍊

彈出所需的庫在頭

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

使用數據大小=「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"/> 

有許多其他功能以及如果你瀏覽插件網站。

Answer 4

現在可以爲最流行的瀏覽器實現自定義引導複選框。

您可以在GitHub中查看我的Bootstrap-Checkbox項目，其中包含簡單的.less file。 有在MDN一個good article描述的一些技術，其中兩個主要有：

1. 標籤重定向click事件。

   如果標籤具有for屬性（如<label for="target_id">Text</label> <input id="target_id" type="checkbox" />），或者它包含如Bootstrap情況下的輸入：<label><input type="checkbox" />Text</label>，則可以將點擊事件重定向到其目標。

   這意味着可以在瀏覽器的一個角落放置一個標籤，點擊它，然後標籤會將點擊事件重定向到位於其他角落的複選框，從而產生複選框的選中/取消選中操作。

   我們可以隱藏原來的複選框視覺，但要還在工作，從標籤採取click事件。在標籤本身中，我們可以使用標籤或僞元素:before :after來模擬複選框。舊的瀏覽器

   一些舊的瀏覽器不支持這樣選擇的兄弟姐妹p+p或特定搜索input[type=checkbox]幾個CSS功能

2. 一般不支持的標籤。根據MDN文章，支持這些功能的瀏覽器也支持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>

Answer 5

我以前只是 「保存放大」，例如：

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

Answer 6

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