Check box size change with CSS

Klapsius picture Klapsius · Aug 28, 2014 · Viewed 193.4k times · Source

How can I change check box sizes (globaly) without class and id? Is it possible to do this in a way different from:

input[type=checkbox] {
    zoom: 1.5;
}

Answer

Charleshaa picture Charleshaa · Aug 28, 2014

input fields can be styled as you wish. So instead of zoom, you could have

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}

EDIT:

You would have to add extra rules like this:

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

Check this fiddle http://jsfiddle.net/p36tqqyq/1/