Set Checkbox Size in HTML & CSS

To set checkbox size in HTML/CSS, we will be using simple CSS properties. We will be understanding three different approaches to set checkbox size in HTML/CSS.

In this article, we are having two checkboxes each having a label. Our task is to set checkbox size in HTML/CSS.

Approaches to Set Checkbox Size in HTML/CSS

Here is a list of approaches to set checkbox size in HTML/CSS which we will be discussing in this article with stepwise explaination and complete example codes.

Setting Checkbox Size using height and width Properties

To set checkbox size in HTML/CSS, we will be using simple CSS height and width properties to set the dimension of checkbox.

  • We have created two checkboxes with input tag using type attribute as checkbox and used two labels to name the checkboxes.
  • Then, we have used "input[type=checkbox]" which selects the checkboxes in our HTML document.
  • We have used height and width properties to set checkbox dimension with height and width as 30px.

Example

Here is a complete example code implementing above mentioned steps to set checkbox size in HTML/CSS using CSS height and width property.

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      input[type=checkbox] {
         width: 30px;
         height: 30px;
      }
   </style>
</head>
<body>
    <h3>
        To Set Checkbox Size in HTML/CSS
    </h3>
    <p>
        In this example we have used CSS <strong>
        height</strong> and <strong>width</strong>   
        property to set checkbox size in HTML/CSS.
    </p>
   <input type="checkbox" id="checkbox-1" 
          name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" 
          name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Setting Checkbox Size using transform Property

In this approach to set checkbox size in HTML/CSS, we will be using scale function of transform property. CSS scale() function resizes an element on two-dimensional plane.

  • First two steps are same as approach one to create and select the checkboxes.
  • Then, we have used "transform: scale(3);" property which scales checkbox size by three times.

Example

Here is a complete example code implementing above mentioned steps to set checkbox size in HTML/CSS using CSS transform property.

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <title>
        Set the size of checkbox
    </title>
    <style>
        input[type="checkbox"] {
            transform: scale(3);
            margin: 15px;
        }
    </style>
</head>
<body>
    <h3>
        To Set Checkbox Size in HTML/CSS
    </h3>
    <p>
        In this example we have used CSS <strong>
        transform</strong> property to set checkbox  
        size in HTML/CSS.
    </p>
    <input type="checkbox" id="option1">
    <label for="option1">Option 1</label>
    <br><br>
    <input type="checkbox" id="option2">
    <label for="option2">Option 2</label>
</body>
</html>

Setting Checkbox Size using zoom Property

In this approach we have used CSS zoom property to set checkbox size in HTML/CSS. CSS zoom property is similar to scale function of transform property. It is non standard and scale() function can be used in place of zoom property.

  • First two steps are same as approach one to create and select the checkboxes.
  • Then, we have used "zoom: 3;" property which scales checkbox size by three times.

Example

Here is a complete example code implementing above mentioned steps to set checkbox size in HTML/CSS using CSS zoom property.

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        input[type="checkbox"] {
            zoom: 3; 
        }
    </style>
</head>
<body>
    <h3>
        To Set Checkbox Size in HTML/CSS
    </h3>
    <p>
        In this example we have used <strong>zoom
        </strong> property to set checkbox size 
        in HTML/CSS.
    </p>
    <input type="checkbox" id="option1">
    <label for="option1">Option 1</label>
    <br><br>
    <input type="checkbox" id="option2">
    <label for="option2">Option 2</label>
</body>
</html>

Conclusion

To set checkbox size in HTML/CSS is a simple process. In this article we have discussed three different approaches to set checkbox size in HTML/CSS which are: by using CSS height and width, by using transform property and by using zoom property.

Updated on: 2024-09-09T17:59:18+05:30

177 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements