{"id":1889,"date":"2015-07-30T20:44:18","date_gmt":"2015-07-30T20:44:18","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1889"},"modified":"2016-04-06T19:28:31","modified_gmt":"2016-04-06T19:28:31","slug":"how-to-hide-checkbox-and-radio-in-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/how-to-hide-checkbox-and-radio-in-email\/","title":{"rendered":"How To Hide Checkbox And Radio Inputs In Email"},"content":{"rendered":"

Update April 2016:<\/B> Outlook.com introduced a bug that modifies styles of elements next to checkboxes. Check out this article<\/a> to learn more.<\/p>\n

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

\nCan’t wait to get started with interactive email?
\nTry out the Image Carousel for Email Builder<\/a>.\n<\/div>\n


<\/p>\n

Techniques that don’t work<\/h4>\n

Hiding techniques<\/a> 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<\/code> is not supported.<\/p>\n

Here’s how a checkbox looks like when we style a checkbox with height: 0px; overflow: hidden<\/code> (before & after):<\/p>\n

\"hide-checkbox-1\"<\/p>\n

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

<\/p>\n

This technique works<\/h4>\n

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:<\/p>\n

<style>\r\n.hide-input{\r\n  display: none;\r\n}\r\n<\/style>\r\n\r\n<!--[if !mso]><!-- -->\r\n<input type=\"checkbox\" class=\"hide-input\" style=\"display: none !important\">\r\n<!--<![endif]--><\/pre>\n
\"hide-checkbox-2\"<\/p>\n
The technique uses three hiding tricks:<\/p>\n
    \n
  1.  Gmail only supports display: none when accompanied by !important.

    <\/li>\n
  2.  Yahoo! Mail does not support display: none inline but allows display: none in the embedded style.

    <\/li>\n
  3.  The trusty ol Outlook conditional comment to hide the element in Outlook.<\/li>\n<\/ol>\n

    <\/p>\n
    As you can see this works without the usual overflow, height, font-size, line-height, visibility baggage.<\/p>\n




    \n
    \n
    \nSubscribe to the #EmailGeeks Newsletter<\/span>\n
    <\/p>\n