Skip to content
Related Articles

Related Articles

How to set checkbox size in HTML/CSS?
  • Last Updated : 26 Feb, 2019

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :