Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set checkbox size in HTML/CSS?
To set checkbox size in HTML/CSS, we can use several CSS properties to control the dimensions and scaling of checkboxes. By default, checkboxes have a small size that may not be suitable for all designs.
Syntax
input[type="checkbox"] {
width: value;
height: value;
/* OR */
transform: scale(value);
/* OR */
zoom: value;
}
Method 1: Using Width and Height Properties
The most straightforward approach is to use the width and height properties to set specific dimensions for checkboxes
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
width: 25px;
height: 25px;
margin-right: 8px;
}
label {
font-size: 16px;
vertical-align: top;
}
</style>
</head>
<body>
<h3>Checkbox Size using Width and Height</h3>
<input type="checkbox" id="option1">
<label for="option1">Option 1</label>
<br><br>
<input type="checkbox" id="option2">
<label for="option2">Option 2</label>
</body>
</html>
Two larger checkboxes (25px × 25px) with labels appear on the page, properly aligned and spaced.
Method 2: Using Transform Scale
The transform: scale() function proportionally resizes checkboxes while maintaining their aspect ratio
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
transform: scale(2);
margin: 10px;
}
label {
font-size: 16px;
margin-left: 10px;
}
</style>
</head>
<body>
<h3>Checkbox Size using Transform Scale</h3>
<input type="checkbox" id="check1">
<label for="check1">Scaled Option 1</label>
<br><br>
<input type="checkbox" id="check2">
<label for="check2">Scaled Option 2</label>
</body>
</html>
Two checkboxes scaled to 2x their original size appear with proper spacing and labels.
Method 3: Using Zoom Property
The zoom property enlarges checkboxes, though it's non-standard and has limited browser support
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
zoom: 1.8;
margin-right: 8px;
}
label {
font-size: 16px;
}
</style>
</head>
<body>
<h3>Checkbox Size using Zoom Property</h3>
<input type="checkbox" id="zoom1">
<label for="zoom1">Zoomed Option 1</label>
<br><br>
<input type="checkbox" id="zoom2">
<label for="zoom2">Zoomed Option 2</label>
</body>
</html>
Two checkboxes enlarged to 1.8x their original size appear with labels (browser support may vary).
Comparison
| Method | Browser Support | Best Use Case |
|---|---|---|
| Width/Height | Excellent | Precise dimensions needed |
| Transform Scale | Excellent | Proportional scaling required |
| Zoom | Limited | Simple enlargement (not recommended) |
Conclusion
Setting checkbox size is easily accomplished using CSS width/height for precise control or transform scale for proportional sizing. The width/height method offers the most reliable cross-browser compatibility.
Updated on: 2026-03-15T16:42:39+05:30
7K+ Views
Advertisements