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

Simply add background image to checkbox. And adjust the sizes as you prefer.

The code below automatically adds background when it's checked, and the size remains the same with unchecked status.

No need to specify like:

input[type=checkbox]:checked

or

input[type=checkbox]:checked ~ div label

For ex, all checkboxes:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

See fiddle here.