How to set checkbox size in HTML/CSS?
Last Updated :
28 Dec, 2023
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 >
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, 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.
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 >
< 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:
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...