How to Set Checkbox Size in HTML/CSS

HTML checkboxes are useful for forms, filters, and toggles—but they’re notoriously difficult to style consistently across browsers. One common challenge developers face is: how do you change the size of a checkbox using CSS?

In this blog post, you’ll learn how to increase or decrease checkbox size, the limitations of native styling, and modern solutions that work across browsers.

✅ The Problem

By default, checkboxes are styled by the browser and have a fixed size that’s not easily modified using traditional CSS properties like width and height.

📌 Solution 1: Use transform: scale()

The most reliable and widely supported method to resize checkboxes is by scaling them with CSS.

✅ Example:

<label>
  <input type="checkbox" class="checkbox-scale" />
  Accept Terms
</label>

.checkbox-scale {
  transform: scale(1.5); /* Scale up to 150% */
  margin-right: 8px;
}

💡 Notes:

• This method visually scales the checkbox but keeps the original dimensions for layout.
• Always add margin to maintain proper spacing with the label.

📌 Solution 2: Set Width & Height (Limited Browser Support)

Some browsers allow you to apply width and height directly to the checkbox, but it doesn’t always work consistently.

.checkbox-size {
  width: 20px;
  height: 20px;
}

This may work in modern versions of Firefox, Chrome, and Edge, but not all platforms support it reliably.

📌 Solution 3: Create a Custom Styled Checkbox

For full control, you can hide the native checkbox and use CSS to build a custom design using ::before or ::after.

✅ Example:

<label class="custom-checkbox">
  <input type="checkbox" />
  <span></span>
  Subscribe to newsletter
</label>

.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.custom-checkbox input {
  display: none; /* Hide the native checkbox */
}

.custom-checkbox span {
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  display: inline-block;
  margin-right: 10px;
  border-radius: 4px;
  background: white;
  position: relative;
}

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

✅ Benefits:

• Full control over size, color, border, and animations.
• Consistent look across all browsers.

✅ Best Practices

🧠 Summary

🚀 Final Thoughts

While HTML checkboxes are small and simple by default, CSS offers you powerful ways to resize and restyle them. For quick fixes, transform: scale() does the trick. For pixel-perfect designs, build a custom checkbox UI using CSS.

💡 Pro tip: Don’t forget to test your styled checkboxes for accessibility and keyboard navigation!