A checkbox is an input type of HTML that allows the user to make a choice between two or more possible options. It permits the user to select multiple values from a predefined list. By default, the checkbox is in the small square box; however, sometimes, it is important to increase the size of the checkbox to increase its visibility.
In this manual, we will explain the method to increase the size of the checkbox using CSS.
How to Increase Checkbox Size in CSS?
You can utilize checkboxes in HTML to take input from users. It offers a predefined set of values using which the user can make a binary choice. Moreover, to increase the checkbox size, the “width” and “height” properties of CSS can be utilized.
Syntax
Syntax of these properties are:
height: value
In the place of “value”, you can set the “width” and “height” of any element according to your preferences.
Let’s move to the practical example, where we will create a checkbox and increase its size using “width” and “height” properties.
Example: Create a Checkbox and Increase its Size in CSS
To increase the checkbox size, first, we will take an input type “checkbox” in the HTML file inside the <body> tag:
<input type="checkbox">
</body>
Currently, the default size of the checkbox is as follows:
Now, move to the CSS to increase the size of the checkbox.
Here, we will access the “input” type defined in the HTML section and set the width and height of the checkbox as “50px”:
width: 50px;
height: 50px;
}
We have successfully increased the size of the created checkbox with the help of height and width CSS properties:
Note: To increase the size of the checkbox, “width” and “height” both properties are necessary to set as the size does not change if you specify one value.
We have covered a simple method to increase the dimension of the checkbox in CSS.
Conclusion
The CSS “width” and “height” properties are used to increase the size of the checkbox. You can specify any value in the “px” units to set the size according to your requirements. However, values of both properties are needed to resize the checkbox. In this guide, we have explained the procedure to increase the checkbox size using CSS.
