Open In App

How to set checkbox size in HTML/CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

A checkbox appears as a marked (checked) square box when activated, serving the purpose of enabling users to choose from multiple options. Unlike radio buttons, checkboxes permit the selection of multiple options concurrently. In this article, we will explore two approaches to adjusting the size of a checkbox.

Method 1: Use the CSS width and height Properties

The checkbox size can be set by using the height and width property. The height property sets the height of the checkbox and the width property sets the width of the checkbox.

Syntax:

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

Example: In this example, we will see the implementation of the above approach with an example.

html




<!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:

resized_checkbox

Note: This works well for Google Chrome, Micr osoft 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: Using transform property

Syntax:

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


Example: In this example, we will see the implementation of above approach.

html




<!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:

checkbox_resize_scale

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.



Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads