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

Or simply style it with height and width like this:

<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">

PS. I have used this with bootstrap and the "checkbox-inline" class

Answer 2

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

Answer 3

I think the best you can do is give it a bigger font-size. From there it's up to how the browser handles it unless you make a mock div element that controls a hidden checkbox. It doesn't scale it up that much.

input[type="checkbox"] {
  font-size: 50px;
}