How to Change the Checkbox Size Using Css

Check box size change with CSS

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/

Increasing the size of checkbox in HTML

Not in an easy cross browser way.

You would get the most flexibility replacing it with a control that utilises JavaScript and CSS. Use a standard checkbox as a fallback.

These days, with the :checked pseudo selector, you can make a label element to do it as well.

CSS: adjusting checkbox size

No, i don't think there's a way of doing it by only using html / css.

You could just make an overlay (div) which is positioned right over the checkbox and makes it visible. Using this overlay you could add an own checkbox graphic and change it's image (=it's visible value) whenever the user clicks on the image. Furhtermore you'll then have to update the real checkbox's value manually to assure that the form can be send containing the checkbox's form value.

This technique is often used by RIA frameworks like QooxDoo, ExtJS, etc.

here you'll find a really nice example of how to use the described technique.

change size of checkbox in boostrap

Try like this :

  .big-checkbox  > input {width: 100px; height: 100px;}

Changing the size of a custom css checkbox

You could use background-size, example with a 40px box :

input[type=checkbox].css-checkbox {  position:absolute;  z-index:-1000;  left:-1000px;   verflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0;  border:0;}
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {  padding-left:45px;  height:40px;   display:inline-block;  line-height:40px;  background-repeat:no-repeat;  background-position: 0 0;  font-size:20px;  vertical-align:middle;  cursor:pointer;  background-size:40px}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {  background-position: left bottom;}
label.css-label {  background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1fa1a7b77abfce3de56af87fcec6bed3.png);  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}

  <div style="position:absolute;top:0;left:0;">        <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">        <label for="checkboxG4" class="css-label radGroup1 clr">Option 1</label></div>

Create CSS to enlarge checkboxes

You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.

I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

input {  display: none;}
label input[type=checkbox] ~ span {  display: inline-block;  vertical-align: middle;  cursor: pointer;  background: #fff;  border: 1px solid #888;  padding: 1px;  height: 20px;  width: 20px;}
label input[type=checkbox]:checked ~ span {  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');  background-size: 100%;}

<label>  Click me:  <input type="checkbox" />  <span></span></label>

Increase checkbox size in IE 11

Here I read:

[5] Internet Explorer 11.0 supports the -webkit prefixed variant as an alias for the default one.

If that doesn't help, this might be an issue that is specific to checkboxes. However, there is a better way to style checkboxes using HTML and CSS:

input[type=checkbox] {  display: none;}
input[type=checkbox] + .cb {  display: inline-block;  width: 22px;  height: 22px;  margin: -4px 0;  border: 1px solid gray;  border-radius: 3px;  transition: .2s;  box-sizing: border-box;  box-shadow: inset 0 0 0 1px white;}input[type=checkbox] + .cb:before {  content: "✓";  color: white;  position: absolute;  line-height: 20px;  font-size: 16px;  margin: 0 0 0 5px;}
input[type=checkbox] + .cb:hover {  box-shadow: inset 0 0 0 1px #0055ff;  border-color: #0055ff;}
input[type=checkbox]:checked + .cb {  box-shadow: inset 0 0 0 10px #0055ff;  border-color: #0055ff;}
input[type=checkbox]:checked + .cb:hover {  box-shadow: inset 0 0 0 10px #3377ff;}

<label>  <input type="checkbox" checked>  <div class="cb"></div>  Style checkbox with CSS</label>