Beating Thunderbird’s Checkbox Bug (and Targeting Techniques)

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).

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.

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>
                            
                        

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.

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

JOIN TODAY