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:
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>
This question is related to
css
twitter-bootstrap
checkbox
laravel-4
laravel-blade
The answer is
I have used this library with sucess
http://plugins.krajee.com/checkbox-x
It requires jQuery and bootstrap 3.x
Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master
Put the contents of the zip in a folder within your project
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
<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.
It is possible to implement custom bootstrap checkbox for the most popular browsers nowadays.
You can check my Bootstrap-Checkbox project in GitHub, which contains simple .less file. There is a good article in MDN describing some techniques, where the two major are:
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 searchinput[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 ishtmlin a HTML page. Thus it is possible to use:rootfor a fallback to old browsers and original checkboxes.Final code snippet:
:root {_x000D_
/* larger checkbox */_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox] {_x000D_
/* hide original check box */_x000D_
opacity: 0;_x000D_
position: absolute;_x000D_
/* find the nearest span with checkbox-placeholder class and draw custom checkbox */_x000D_
/* draw checkmark before the span placeholder when original hidden input is checked */_x000D_
/* disabled checkbox style */_x000D_
/* disabled and checked checkbox style */_x000D_
/* when the checkbox is focused with tab key show dots arround */_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-placeholder {_x000D_
width: 14px;_x000D_
height: 14px;_x000D_
border: 1px solid;_x000D_
border-radius: 3px;_x000D_
/*checkbox border color*/_x000D_
border-color: #737373;_x000D_
display: inline-block;_x000D_
cursor: pointer;_x000D_
margin: 0 7px 0 -20px;_x000D_
vertical-align: middle;_x000D_
text-align: center;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder {_x000D_
background: #0ccce4;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder:before {_x000D_
display: inline-block;_x000D_
position: relative;_x000D_
vertical-align: text-top;_x000D_
width: 5px;_x000D_
height: 9px;_x000D_
/*checkmark arrow color*/_x000D_
border: solid white;_x000D_
border-width: 0 2px 2px 0;_x000D_
/*can be done with post css autoprefixer*/_x000D_
-webkit-transform: rotate(45deg);_x000D_
-moz-transform: rotate(45deg);_x000D_
-ms-transform: rotate(45deg);_x000D_
-o-transform: rotate(45deg);_x000D_
transform: rotate(45deg);_x000D_
content: "";_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-placeholder {_x000D_
background: #ececec;_x000D_
border-color: #c3c2c2;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-placeholder {_x000D_
background: #d6d6d6;_x000D_
border-color: #bdbdbd;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-placeholder {_x000D_
outline: 1px dotted black;_x000D_
}_x000D_
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-placeholder {_x000D_
width: 26px;_x000D_
height: 26px;_x000D_
border: 2px solid;_x000D_
border-radius: 5px;_x000D_
/*checkbox border color*/_x000D_
border-color: #737373;_x000D_
}_x000D_
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-placeholder:before {_x000D_
width: 9px;_x000D_
height: 15px;_x000D_
/*checkmark arrow color*/_x000D_
border: solid white;_x000D_
border-width: 0 3px 3px 0;_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<p>_x000D_
Original checkboxes:_x000D_
</p>_x000D_
<div class="checkbox">_x000D_
<label class="checkbox-bootstrap"> _x000D_
<input type="checkbox"> _x000D_
<span class="checkbox-placeholder"></span> _x000D_
Original checkbox_x000D_
</label>_x000D_
</div>_x000D_
<div class="checkbox">_x000D_
<label class="checkbox-bootstrap"> _x000D_
<input type="checkbox" disabled> _x000D_
<span class="checkbox-placeholder"></span> _x000D_
Original checkbox disabled_x000D_
</label>_x000D_
</div>_x000D_
<div class="checkbox">_x000D_
<label class="checkbox-bootstrap"> _x000D_
<input type="checkbox" checked> _x000D_
<span class="checkbox-placeholder"></span> _x000D_
Original checkbox checked_x000D_
</label>_x000D_
</div>_x000D_
<div class="checkbox">_x000D_
<label class="checkbox-bootstrap"> _x000D_
<input type="checkbox" checked disabled> _x000D_
<span class="checkbox-placeholder"></span> _x000D_
Original checkbox checked and disabled_x000D_
</label>_x000D_
</div>_x000D_
<div class="checkbox">_x000D_
<label class="checkbox-bootstrap checkbox-lg"> _x000D_
<input type="checkbox"> _x000D_
<span class="checkbox-placeholder"></span> _x000D_
Large checkbox unchecked_x000D_
</label>_x000D_
</div>_x000D_
<br/>_x000D_
<p>_x000D_
Inline checkboxes:_x000D_
</p>_x000D_
<label class="checkbox-inline checkbox-bootstrap">_x000D_
<input type="checkbox">_x000D_
<span class="checkbox-placeholder"></span>_x000D_
Inline _x000D_
</label>_x000D_
<label class="checkbox-inline checkbox-bootstrap">_x000D_
<input type="checkbox" disabled>_x000D_
<span class="checkbox-placeholder"></span>_x000D_
Inline disabled_x000D_
</label>_x000D_
<label class="checkbox-inline checkbox-bootstrap">_x000D_
<input type="checkbox" checked disabled>_x000D_
<span class="checkbox-placeholder"></span>_x000D_
Inline checked and disabled_x000D_
</label>_x000D_
<label class="checkbox-inline checkbox-bootstrap checkbox-lg">_x000D_
<input type="checkbox" checked>_x000D_
<span class="checkbox-placeholder"></span>_x000D_
Large inline checked_x000D_
</label>Or you can style it with pixels.
.big-checkbox {width: 30px; height: 30px;}
It is possible in css, but not for all the browsers.
The effect on all browsers:
http://www.456bereastreet.com/lab/form_controls/checkboxes/
A possibility is a custom checkbox with javascript:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
just use simple css
.big-checkbox {width: 1.5rem; height: 1.5rem;top:0.5rem}
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;
}
I used just "save in zoom", in example:
.my_checkbox {
width:5vw;
height:5vh;
}
Following works in bootstrap 4 and displays well in CSS, mobile and has no issues with label spacing.
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>
You can also make it extra large by declaring checkbox-xl
If anyone from BS team is reading this, it would be really good if you make this available right out of the box, I don't see anything for it in BS 5 either
<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; }
Source: Stackoverflow.com