Skip to content
Related Articles

Related Articles

Improve Article

How to set checkbox size in HTML/CSS?

  • Last Updated : 30 Jul, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :