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);
    }