Create CSS to enlarge checkboxes

Question

I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.

Ideas?

Answer 1

To double the size of checkboxes, you can use the CSS scale property. The (2,2) means 2 times the width and 2 times the height of the original, but this will be quite large.

input[type="checkbox"] {
  transform:scale(2, 2);
}

You can also use decimal values, for just slightly bigger checkboxes.

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }

Answer 2

This works. It uses relative sizes so it scales with your current font size.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

You may need to adjust your margins though.

Answer 3

Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.

or you can try with

 style="zoom:1.2"

jQuery offers a plugin to do a replacement on checkboxes