Update April 2016: Outlook.com introduced a bug that modifies styles of elements next to checkboxes. Check out this article to learn more.

Hidden checkbox and radio inputs are becoming a staple way to introduce interactivity in email. Here’s a simple way to hide these elements in all email clients.

Techniques that don’t work

Hiding techniques vary over the different email clients so its tempting to add other fallback hiding tricks when hiding elements. Unfortunately, the typical methods to hide divs and tables don’t work on form elements and may result in odd spacing artifacts when display: none is not supported.

Here’s how a checkbox looks like when we style a checkbox with height: 0px; overflow: hidden (before & after):

As you can see, even with overflow: hidden, the checkbox is still visible and rendered over the next element.

This technique works

The solution that works is a simple one. Unlike the other hiding techniques, this requires adding a style into the <style> block but it is relatively straightforward:

<style>
.hide-input{
  display: none;
}
</style>

<!--[if !mso]><!-- -->
<input type="checkbox" class="hide-input" style="display: none !important">
<!--<![endif]-->

The technique uses three hiding tricks:

1. Gmail only supports display: none when accompanied by !important.
   
   
2. Yahoo! Mail does not support display: none inline but allows display: none in the embedded style.
   
   
3. The trusty ol Outlook conditional comment to hide the element in Outlook.

As you can see this works without the usual overflow, height, font-size, line-height, visibility baggage.