Menu
We have been sizing checkboxes using transform:scale(1.5) for sometime. Recently something has changed in the browsers, because it is no longer working. For example on Chrome Version 42.0.2311.135 (64-bit) updated today (4/30/15), the following code doesn't work. The size jumps to about 3X. Changing the scale number (for example to 1.1) has no effect.
<html>
<head></head>
<body>
<input type="checkbox" style="-webkit-transform:scale(1.5)">
</body>
</html>
So, does anyone know how to size a checkbox using current browsers? I've tried all the solutions I have read about (font-size:x-large, setting height, width, font-size, ...)
514
asked Sep 02 '26 10:09
It's notoriously difficult to style checkbox elements. I tend to hide the checkbox itself, introducing a sibling element to show the state instead. Simplifed / redacted code from something I worked on:
Markup
<label class="checkbox">
<input type="checkbox">
<span class="checkbox__icon"></span>
</label>
SASS
.checkbox {
.checkbox__icon {
/* styling for checkbox goes here */
}
input[type=checkbox] {
display: none;
&:checked ~ .checkbox__icon {
/* styling for checked checkbox goes here */
}
&:disabled ~ .checkbox__icon {
/* styling for disabled checkbox goes here */
}
}
}
The span can contain a font-icon, an svg background image, whatever you like. But regardless of the approach you take, the upshot is that you can control how it looks across browsers.
134
answered Sep 04 '26 02:09
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