Interactive Email

Interactive email happens by driving content through the checking and unchecking of <input> checkboxes.

Note: You can either use type=”checkbox” or type=”radio” depending on your needs.

css

<style type="text/css">
input {
  display: none;
}
label {
  cursor: pointer;
}
#interactiveCheckbox:checked~* .interactiveContent {
  background-color:#98D58E !important;
}
</style>

To have multiple qualifiers for an interaction, list the label ids, each followed by ~ and keep the * for the last one. This setup means both interactiveCheckbox1 and interactiveCheckbox2 have to be checked for the background color to change.

<style type="text/css">
#interactiveCheckbox1:checked~ #interactiveCheckbox2:checked~* .interactiveContent {
  background-color:#98D58E !important;
}
</style>

below the opening <body> tag

<!--[if !mso]><!-->
<input type="checkbox" name="thing" id="interactiveCheckbox" style="display:none !important;">
<!--<![endif]-->

html

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td class="interactiveContent" align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; mso-line-height-rule:exactly; line-height:20px; color:#3a3a3a; padding:20px 20px 20px 20px;"><label for="interactiveCheckbox" style="text-decoration:underline;">click me to change background colors</label></td>
  </tr>
</table>