Open In App
Related Articles

How to set checkbox size in HTML/CSS?

Improve Article
Improve
Save Article
Save
Like Article
Like

The checkbox is an HTML element which is used to take input from the user.
Method 1: The checkbox size can be set by using height and width property. The height property sets the height of checkbox and width property sets the width of the checkbox.

Syntax:

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

Example:




<!DOCTYPE html> 
<html>
  
<head>
    <title>
        Set checkbox size
    </title>
      
    <!-- Style to set the size of checkbox -->
    <style>
        input.largerCheckbox {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
  
<body
    <input type="checkbox" class="defaultCheckbox"
            name="checkBox1" checked>
          
    <input type="checkbox" class="largerCheckbox"
            name="checkBox2" checked>
</body>
  
</html>                    


Output:

Note: This works well for Google Chrome, Microsoft Edge and Internet Explorer. In Mozilla Firefox the clickable checkbox area is as specified but it displays a checkbox of the default size.

Method 2: An alternate solution that works for Mozilla Firefox as well is by using transform property.

Syntax:

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

Example:




<!DOCTYPE html> 
<html>
  
<head>
    <title>
        Set the size of checkbox
    </title>
      
    <!-- Use transform scale property to 
        set size of checkbox -->
    <style>
        input.largerCheckbox {
            transform : scale(10);
        }
        body {
            text-align:center;
            margin-top:100px;
        }
    </style>
</head>
  
<body>
    <input type="checkbox" class="largerCheckbox"
            name="checkBox2" checked>
</body>
  
</html>


Output:

This method has a few drawbacks. The checkbox has to be positioned carefully to keep it within the browser window or prevent it from overlapping with other elements. Also, in some browsers, the checkbox may appear pixelated for larger sizes.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 30 Jul, 2021
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials