Checkboxes in web pages – how to make them bigger?
Actually there is a way to make them bigger, checkboxes just like anything else (even an iframe like a facebook button).
Wrap them in a "zoomed" element:
.double {
zoom: 2;
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-moz-transform: scale(2);
transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}<div class="double">
<input type="checkbox" name="hello" value="1">
</div>It might look a little bit "rescaled" but it works.
Of course you can make that div float:left and put your label besides it, float:left too.
In case this can help anyone, here's simple CSS as a jumping off point. Turns it into a basic rounded square big enough for thumbs with a toggled background color.
input[type='checkbox'] {
-webkit-appearance:none;
width:30px;
height:30px;
background:white;
border-radius:5px;
border:2px solid #555;
}
input[type='checkbox']:checked {
background: #abd;
}<input type="checkbox" />