How Can I Set Different Sizes for Checkboxes on the Same Page?

Checkboxes are fundamental form elements, but customizing their size — especially having different sizes for multiple checkboxes on the same page — requires some careful CSS techniques. Since native checkboxes are browser-rendered, their styling options are limited, making this a bit tricky.

In this blog, we’ll explore how to effectively set different checkbox sizes on the same page while maintaining usability and accessibility.

Table of Contents

Why Is It Challenging?

Native checkboxes have limited styling via CSS.
Applying direct width and height often doesn’t work consistently.
Scaling via transform: scale() affects the checkbox visually but doesn’t change its actual clickable area unless you adjust spacing.
You need a flexible approach that allows individual sizing per checkbox.

Method 1: Using Different CSS Classes with `transform: scale()`

You can assign different classes to checkboxes and scale each one differently.

Example:

<input type="checkbox" id="small" class="checkbox-small" />
<label for="small">Small Checkbox</label>

<input type="checkbox" id="medium" class="checkbox-medium" />
<label for="medium">Medium Checkbox</label>

<input type="checkbox" id="large" class="checkbox-large" />
<label for="large">Large Checkbox</label>

input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

.checkbox-small {
  transform: scale(0.8);
}

.checkbox-medium {
  transform: scale(1.2);
}

.checkbox-large {
  transform: scale(1.8);
}

Notes:

The clickable area remains the original size; adjust padding or margins on labels to compensate.
This method is simple and maintains native checkbox behavior.

Method 2: Custom Checkboxes with Different Sizes

For more control, hide native checkboxes and use styled labels with different sizes.

HTML:

<input type="checkbox" id="cb1" class="custom-checkbox small" />
<label for="cb1">Small Checkbox</label>

<input type="checkbox" id="cb2" class="custom-checkbox medium" />
<label for="cb2">Medium Checkbox</label>

<input type="checkbox" id="cb3" class="custom-checkbox large" />
<label for="cb3">Large Checkbox</label>

CSS:

input[type="checkbox"].custom-checkbox {
  display: none;
}

.custom-checkbox + label {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-left: 30px; /* Adjusted in size classes */
}

/* Base box */
.custom-checkbox + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid #555;
  border-radius: 4px;
  background: white;
}

/* Size variations */
.custom-checkbox.small + label {
  padding-left: 20px;
}

.custom-checkbox.small + label::before {
  width: 15px;
  height: 15px;
}

.custom-checkbox.medium + label {
  padding-left: 30px;
}

.custom-checkbox.medium + label::before {
  width: 20px;
  height: 20px;
}

.custom-checkbox.large + label {
  padding-left: 40px;
}

.custom-checkbox.large + label::before {
  width: 30px;
  height: 30px;
}

/* Checkmark */
.custom-checkbox:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Adjust checkmark size per variation */
.custom-checkbox.small:checked + label::after {
  width: 4px;
  height: 8px;
  left: 4px;
  top: 3px;
  border-width: 0 2px 2px 0;
}

.custom-checkbox.medium:checked + label::after {
  width: 6px;
  height: 12px;
  left: 6px;
  top: 4px;
  border-width: 0 3px 3px 0;
}

.custom-checkbox.large:checked + label::after {
  width: 9px;
  height: 16px;
  left: 9px;
  top: 6px;
  border-width: 0 4px 4px 0;
}

Advantages:

Fully customizable sizes and styles.
Precise control over spacing and appearance.

Method 3: Using SVG or Icon Fonts for Custom Checkboxes

If your design requires pixel-perfect control or unique styles, consider using SVG or icon fonts as checkboxes. This way, you can size and style them however you want, but this is more advanced and requires JavaScript to sync states.

Accessibility Tips

Always link labels to inputs using for and id.
Ensure keyboard navigation works for custom checkboxes.
Maintain clear focus styles for visibility.
Test your implementation across browsers and devices.

✅ Summary

To set different checkbox sizes on the same page, you can:

Use CSS transform: scale() with different classes for quick scaling.
Create custom checkboxes with hidden inputs and styled labels sized via CSS.
Use SVG/icon-based checkboxes for maximum design flexibility.

Choose the method that best fits your project’s complexity and design needs.