Menu
Is it possible to set the size of a checkbox using CSS or HTML across browsers?
width and size work in IE6+, but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.
301
The solution (in principle)Wrap your checkbox in a label element. This will mean that even when it is hidden, you can still toggle its checked state by clicking anywhere within the label. Hide your checkbox. Add a new element after the checkbox which you will style accordingly.
The easiest way to increase the size of the checkbox is by using CSS width and height properties. Using these two properties we can easily set any custom width and height of the checkbox.
just add the class="checkbox" to your checkboxes. Then create that style in your css code. You will still need to add the class for it to work in IE, and it will not work in other non-IE browsers that do not support IE.
It's a little ugly (due to the scaling up), but it works on most newer browsers:
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 */ transform: scale(2); padding: 10px; } /* Might want to wrap a span around your checkbox text */ .checkboxtext { /* Checkbox text */ font-size: 110%; display: inline; }<input type="checkbox" name="optiona" id="opta" checked /> <span class="checkboxtext"> Option A </span> <input type="checkbox" name="optionb" id="optb" /> <span class="checkboxtext"> Option B </span> <input type="checkbox" name="optionc" id="optc" /> <span class="checkboxtext"> Option C </span>Working solution for all modern browsers.
input[type=checkbox] { transform: scale(1.5); }<label><input type="checkbox"> Test</label>Compatibility:
Appearance:
Chrome 58 (May 2017), Windows 10
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
