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 16×16 even if I set a smaller size.

18 s
18

Working solution for all modern browsers.

input[type=checkbox] {
    transform: scale(1.5);
}
<label><input type="checkbox"> Test</label>

Compatibility:

  • IE: 10+
  • FF: 16+
  • Chrome: 36+
  • Safari: 9+
  • Opera: 23+
  • iOS Safari: 9.2+
  • Chrome for Android: 51+

Appearance:

  • Scaled checkboxes on Chrome, Win 10 Chrome 58 (May 2017), Windows 10
Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *