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

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

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>

CodePudding user response：

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;
}