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>