htmlcssoutlookhtml-emailemail-templates

Checkbox using HTML and CSS Only for outlook web (Not the desktop App)

In outlook windows desktop app, checkbox isnt supported as it uses MS word as its rendering engine. However, in the web app, checkbox works and Can I email site says clearly that checkbox:checked is supported on outlook.com i.e. outlook web.

I want to hide data by default, and when checkbox is ":checked" , I want to show the data.However, in the mail, i am able to click on the checkbox but not able to display the hidden data. Is there any other way to show and hide data in outlook web ?

here is the fiddle that I wrote : https://jsfiddle.net/cL2dbpq5/

here is how it looks in outlook web:

Image doesnt display hidden data

code :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">


<head>
    <style>
     
        #content {
            display: none;
        }

        #show:checked~#content {
            display: block;
        }


    </style>
</head>

<body>

    <input id="show" type=checkbox>
    <label for="show">Click Me</label>
    <span id="content">Text visible when checkbox is clicked</span>

</body>

</html>

Solution

  • As stated on Can I email, :checked is “Only supported on type selectors.” on Outlook.com. This means you can use input:checked but not #show:checked. So in your case replace your style with the following and it should work.

    input:checked~#content {
    display: block;
}