Click to Sign Up for a 7 Day Free Trial!

Email Development

Beating Thunderbird’s Checkbox Bug (and Targeting Techniques)

Email On Acid

The Thunderbird email client has a peculiar "bug" when it comes to the support of checkbox and radio elements. This article will go over a fix for that bug. Additionally, I'll cover various methods to target your CSS for Thunderbird.

Thunderbird has been regarded as a declining email client since the Mozilla Foundation, which also develops the Firefox browser, made a decision in 2012 to scale back development for the Thunderbird email client so they could focus on Firefox.

Despite the announcement, Thunderbird is still seeing active development and there are many die-hard fans, especially among Linux users (Thunderbird is also available for Windows, MacOS).

Checkbox and radio elements are supported but not toggle-able

Although Thunderbird supports checkbox and radio elements in emails, users cannot toggle their state. This is true regardless of whether one clicks on a checkbox element or on a label wrapping or referencing a checkbox using the "for" attribute. If a checkbox is unchecked, it remains unchecked and vice versa.

This prevents the interactive checkbox technique (better known as checkbox hack) from working in Thunderbird. The checkbox hack involves using the checked state of checkboxes or radio buttons to change the properties of elements in an email and is used to create interactive features in email like interactive carousels and image galleries.

The form hack to the rescue

I noticed that clicking on any form element causes the form to be submitted. If the form has a url within an action attribute, the form is posted to that url. If the form tag is missing or contains no value, the form is not submitted but checkbox and radio elements do not toggle.

Interestingly setting the form action attribute to "#" fixes this issue. Checkboxes and radio boxes become toggleable. Nice!

<form action="#">
Checkbox: <input type="checkbox" name="mycheckbox" value="1">
</form>

Targeting Thunderbird using the moz-text-html class

If you're interested in targeting the Thunderbird client, there is a simple way to do that using the moz-text-html class. The Thunderbird email client wraps email content with a div with the class moz-text-html to allow users to customize the look of email in the client.

You can target the Thunderbird email client just by prepending .moz-text-html to any style selector in the style block.The following style will turn text in paragraph tags orange only in Thunderbird:

.moz-text-html p {
 color: orange
}

Thunderbird, unlike most modern email clients, does not use the Webkit layout engine (it uses the Firefox Gecko engine) so it responds to -moz vendor prefixes instead of the -webkit ones.

This also means advanced CSS within the -webkit-device-pixel-ratio media queries will not be active in Thunderbird. If you're wondering what's the equivalent for Thunderbird, it's -moz-device-pixel-ratio. You can use the below media query to include a set of styles that trigger only in Thunderbird.

@media screen and (-moz-device-pixel-ratio){
  .foo{ background-color: green; }
}

A hat tip to FreshInbox commenter gnicky_it for the suggestion of using the moz-text-html class.

Are you an email geek?

Join our Community where you can access expert-level email techniques, client hacks and free templates!

About the Author

Justin Khoo

Justin Khoo

Justin Khoo (@freshinbox) is an email developer and writes about email techniques and new innovations. He has been involved in many aspects of email over the past decade, everything from building webmail clients and email campaign services to coding HTML emails.

Join the Discussion

Why would you want someone to check a box or click a radio button in an email?

My goal is to get them to my site with their first click.

You give people to many options or to many steps they may just ignore them all and click delete.
digideth
Hi digideth, checkboxes are used to add interactivity in an email. You are right, it all depends on your goal. If you just want to use emails to drive clicks to your website, this could distract from it.

However some people want to use emails to drive engagement or elevate their content above other emails in the inbox and that is when things like carousels or rollover images may be useful.

https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email
freshinbox
Justin, thanks for an insightful article.

Another trick for targeting the Thunderbird (Gecko) client is to use this media query:

@-moz-document url-prefix() {
/* Insert styles here */
}

Learned from a Litmus blog post I would highly recommend: “A Bulletproof Guide to Using HTML5 and CSS3 in Email”.
Lembit Kivisik

Leave a Comment