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

When building modern web forms, you may want to display checkboxes of different sizes depending on context—perhaps large checkboxes for mobile users, medium ones in a settings panel, or small ones in a dense table.

While native HTML checkboxes are limited in styling, CSS gives you several ways to control their size individually, right on the same page.

In this article, we’ll cover multiple methods to assign custom checkbox sizes, including scaling, direct sizing (where supported), and custom checkboxes with full control.

✅ 1. Use transform: scale() for Easy Resizing

The transform: scale() method is widely supported and ideal for quickly resizing native checkboxes.

✅ Example:

<label><input type="checkbox" class="small-check" /> Small</label><br>
<label><input type="checkbox" class="medium-check" /> Medium</label><br>
<label><input type="checkbox" class="large-check" /> Large</label>

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

.medium-check {
  transform: scale(1);
}

.large-check {
  transform: scale(1.5);
}

🔍 Notes:

• This visually resizes the checkbox but doesn’t change the layout size.
• Add margin-right if needed to prevent text overlap.
• For accessibility, keep checkbox label associations (<label> or aria-label) intact.

✅ 2. Apply width and height Directly (Where Supported)

Some browsers (e.g., recent Chrome and Firefox versions) allow you to style checkboxes directly using width and height.

.checkbox-small {
  width: 14px;
  height: 14px;
}

.checkbox-large {
  width: 24px;
  height: 24px;
}

<input type="checkbox" class="checkbox-small" />
<input type="checkbox" class="checkbox-large" />

⚠️ Browser inconsistency alert: This method does not work consistently across all browsers and operating systems.

✅ 3. Use Custom Styled Checkboxes for Full Control

To get pixel-perfect sizing and styling, hide the default checkbox and create your own using CSS. This method is ideal for UI/UX design systems.

✅ HTML:

<label class="checkbox-wrapper small">
  <input type="checkbox" />
  <span class="custom-box"></span>
  Small Checkbox
</label>

<label class="checkbox-wrapper large">
  <input type="checkbox" />
  <span class="custom-box"></span>
  Large Checkbox
</label>

✅ CSS:

.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
}

.checkbox-wrapper input {
  display: none;
}

.checkbox-wrapper .custom-box {
  display: inline-block;
  border: 2px solid #333;
  background-color: #fff;
  margin-right: 8px;
  border-radius: 3px;
  position: relative;
}

.checkbox-wrapper.small .custom-box {
  width: 14px;
  height: 14px;
}

.checkbox-wrapper.large .custom-box {
  width: 24px;
  height: 24px;
}

.checkbox-wrapper input:checked + .custom-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

🎯 Result:

You now have visually customized checkboxes with different sizes and full styling control on the same page.

🧠 Best Practices

✅ Summary

🚀 Final Thoughts

You can absolutely create checkboxes of different sizes on the same page using CSS. For quick solutions, use transform: scale(). For precision and design control, go with custom CSS checkboxes—they’re accessible, scalable, and fully customizable.

💡 Pro tip: Always ensure your checkboxes remain accessible by using <label> tags and input elements, even when hidden.