How to Set the Checkbox Size with HTML and CSS

A checkbox is displayed as a ticked (checked) square box when enabled. Checkboxes are used to allow a user to select among a number of options. The difference between checkboxes and radio buttons is that you can select all the provided options simultaneously when a checkbox is used, while in the case of radio buttons, only one option can be selected.

In this snippet, we will learn how to to change the size of a checkbox. Here, two methods are presented.

Use the CSS width and height Properties

You can set the checkbox size by using the CSS width and height properties. Use the height property to set the height of the checkbox and the width property to set the width of the checkbox.

Your code will look like this:

input./*checkbox class name*/ {
  width: /*preferred width*/;
  height: /*preferred height*/;
}

Now let’s see an example to understand how to do it.

Example of setting the size of a checkbox with the width and height properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input.larger {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Checkbox size example</h2>
    <p>Default checkbox size:</p>
    <input type="checkbox" name="checkBox1" checked>
    <p>A larger checkbox:</p>
    <input type="checkbox" class="larger" name="checkBox2" checked>
  </body>
</html>

Try it Yourself »

Result

Default checkbox size:
A larger checkbox:

It works well in Google Chrome, Microsoft Edge. But in Mozilla Firefox the clickable checkbox area is as defined, but it shows a default size checkbox.

Use the CSS transform Property

An alternative approach that also works for Mozilla Firefox is to use the CSS transform property. This method works well for Chrome as well.

The code syntax will be like this:

input./*checkbox class name*/ {
  transform: scale(/*preferred magnification*/);
}

There are some disadvantages to using this method. To keep it within the browser window or prevent it from overlapping with other elements, the checkbox should be located accurately. In some browsers, the checkbox can appear pixelated for larger sizes.

Example of setting the size of a checkbox with the transform property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input.larger {
        transform: scale(5);
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <p>Default checkbox size:</p>
    <input type="checkbox" name="checkBox1" checked>
    <p>A larger checkbox:</p>
    <input type="checkbox" class="larger" name="checkBox2" checked>
  </body>
</html>