How to set checkbox size in HTML/CSS?
Setting checkbox size in HTML/CSS involves adjusting its dimensions for visual appeal or usability. This is achieved through CSS properties like width, height, or transform, ensuring checkboxes fit design requirements and enhance user experience. Checkboxes allow multiple selections, unlike radio buttons.
We’ll explore two sizing approaches here.
Table of Content
- Using the CSS width and height Properties
- Using transform property
Method 1: Use the CSS width and height Properties to set checkbox size
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.
<!DOCTYPE html>
<html>
<head>
<title>
Set checkbox size
</title>
<!-- Style to set the size of checkbox -->
<style>
input.largerCheckbox {
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<h3>Setting checkbox size by using HTML/CSS</h3>
<input type="checkbox" class="defaultCheckbox"
name="checkBox1" checked>
<input type="checkbox" class="largerCheckbox"
name="checkBox2" checked>
</body>
</html>
Output:
setting checkbox size in HTML/CSS Example 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.
Method 2: Using transform property to set checkbox size
The transform property in CSS scales checkbox size without altering its proportions. Applied via the .checkbox selector, it efficiently adjusts dimensions, aiding in straightforward customization of checkbox appearance.
Syntax:
input./*checkbox class name*/ {
transform : scale(/*desired magnification*/);
}
Example: In this example, we will see the implementation of above approach.
<!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:
setting checkbox size in HTML/CSS
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.