How to Change Size of Checkbox in CSS

A checkbox is a control that allows the user to select one or more options from a set. Checkboxes are typically presented as small squares that are either ticked or unticked. When a checkbox is ticked, it indicates that the associated option is enabled.

Checkboxes are often used in forms to allow users to select multiple options, such as when choosing which products to add to a shopping cart. They can also be used as a simple toolbar for enabling and disabling certain features. 

You can change the size of a checkbox by using the CSS width and height properties or transform property.

<html>
  <head>
    <title>HTML Chexkbox</title>

    <style text="text/css">
      body{
        font-family: sans-serif;
        padding: 10em;
      }
      .big-checkbox {
        transform: scale(3);
      }
      label{
        padding-left: 3em;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <form>
        <input type="checkbox" name="checkbox-agree" checked> <label>Do you agree?</label>
        <div style="margin-top: 3em;">
          <input type="checkbox" class="big-checkbox" name="checkbox-subscription" checked> <label>Subscription</label>
      </div>
      </form>
    </div>
  </body>
</html>
<html>
  <head>
    <title>HTML Chexkbox</title>

    <style text="text/css">
      .wrapper{
        padding: 10em;
        font-family: sans-serif;
      }
      .big-checkbox {
        width: 100px;
        height: 100px;
      }
      label{
        padding-left: 3em;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <form>
        <input type="checkbox" class="big-checkbox" name="checkbox-subscription" checked> <label>Subscription</label>
      </form>
    </div>
  </body>
</html>
Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close