Interactive Email – checkbox hack

I’m going to just post an example instead of going into all the detail, but here is some detail.

This hack only works in Webkit email clients, which is pretty much IOS devices, Outlook on the Mac, Apple mail, and maybe others, but doesn’t work in Outlook in general, Gmail, Yahoo, etc.

To target Webkit email clients, we use this media query:

@media screen and (-webkit-min-device-pixel-ratio: 0)

In this example, we are using the CSS Psudo element :checked to create a click event listener. Part of the hack is that we can use the <label> tag to wrap around content we want clickable. The actual form element being clicked stays hidden.


Styles
input, .webkit_content {display: none;}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .webkit-hide {display:none;}
  #A1_result {display:none;}
  #A1:checked ~ #A1_result {display:block}
}
HTML
<div class="webkit-hide">
  Show this if it is not a Webkit email client
</div>
<!-- [if (gte mso 9)|(IE)]>
<!-->
<form class="webkit_content">
  <label for="A1">
    <input id="A1" name="radio_btn" type="radio" value="">
    Click here!
  </label>
    <div id="A1_result">
      Show this content when you click on "Click here!" above.
    </div>
  </form>
<!--<![endif]-->
It's only fair to share...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
Share on Google+
Google+
This entry was posted in CSS3, Email Dev and tagged , , , . Bookmark the permalink.