Can I change the checkbox size using CSS?

Is it possible to set the size of a checkbox using CSS or HTML across browsers?

width and size work in IE6+, but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.

Solution 1:

It's a little ugly (due to the scaling up), but it works on most newer browsers:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

Solution 2:

Working solution for all modern browsers.

input[type=checkbox] {
    transform: scale(1.5);
}

<label><input type="checkbox"> Test</label>

Compatibility:

IE: 10+
FF: 16+
Chrome: 36+
Safari: 9+
Opera: 23+
iOS Safari: 9.2+
Chrome for Android: 51+

Appearance:

Chrome 58 (May 2017), Windows 10

Solution 3:

An easy solution is use the property zoom:

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

<input type="checkbox" />

Solution 4:

2020 version - using pseudo-elements, size depends on font size.

Default checkbox/radio is rendered outside of screen, but CSS creates virtual elements very similar to default elements. Supports all browsers, no blur. Size depends on font size. Keyboard actions (space, tabs) are also supported.

https://jsfiddle.net/ohf7nmzy/2/

body{
    padding:0 20px;
}
.big{
    font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
    position: relative;
    line-height: 1.4;
}
/* radio */
input[type=radio]{
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}
input[type=radio] + label:before{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border:none;
    border-radius: 50%;
    background-color: #bbbbbb;
}
input[type=radio] + label:after{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
    position:absolute;
    content:'';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
    border: 0.2em solid #8eb9fb;
    margin-top: -0.2em;
    margin-left: -0.2em;
    box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border:none;
    border-radius: 10%;
    background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 10%;
    transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
    position:absolute;
    content:'';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
    position: absolute;
    content: "\2713";
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
    border-radius: 10%;
    color: white;
    text-align: center;
    line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
    border: 0.1em solid #8eb9fb;
    margin-top: -0.1em;
    margin-left: -0.1em;
    box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
    <input type="checkbox" name="checkbox_3" id="gg" checked /> 
    <label for="gg">Checkbox big</label>

    <br />

    <input type="checkbox" name="checkbox_4" id="hh" /> 
    <label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
    <input type="radio" name="radio_2" id="cc" value="1" checked /> 
    <label for="cc">Radio big</label>

    <br />

    <input type="radio" name="radio_2" id="dd" value="2" /> 
    <label for="dd">Radio big</label>
</div>

2017 version - using zoom or scale

Browser will use non-standard zoom feature if it is supported (nice quality) or standard transform: scale (blurry on Safari) as fallback.

https://jsfiddle.net/ksvx2txb/11/

@supports (zoom:2) {
    input[type="radio"],  input[type=checkbox]{
    zoom: 2;
    }
}
@supports not (zoom:2) {
    input[type="radio"],  input[type=checkbox]{
        transform: scale(2);
        margin: 15px;
    }
}
label{
  /* fix vertical align issues */
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>

Solution 5:

I just came out with this:

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

Of course, thanks to this, you can change the value of content to your needs and use an image if you wish or use another font...

The main interest here is that:

The checkbox size stays proportional to the text size
You can control the aspect, the color, the size of the checkbox
No extra HTML needed !
Only 3 lines of CSS needed (the last one is just to give you ideas)

Edit: As pointed out in the comment, the checkbox won't be accessible by key navigation. You should probably add tabindex=0 as a property for your label to make it focusable.