Outlook网页端HTML/CSS复选框显隐失效，求替代实现方案

Outlook Windows桌面客户端因采用MS Word作为渲染引擎，不支持复选框；但网页端可正常使用复选框，且相关兼容性网站明确说明outlook.com（即Outlook网页端）支持checkbox:checked选择器。

需求是实现默认隐藏内容，复选框处于:checked状态时显示内容，但实际在邮件中点击复选框后隐藏内容仍无法显示，现询问Outlook网页端其他实现内容显隐的方法。

现有代码示例 #

<!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">点击显示内容</label>
    <span id="content">勾选后可见的文本内容</span>

</body>

</html>

实际效果截图 #

方法1：优化CSS选择器与元素结构 #

Outlook网页端对CSS相邻兄弟选择器的支持存在细节限制，可调整选择器优先级并优化元素结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .hidden-content {
            display: none !important;
        }
        #toggle-input:checked + label + .hidden-content {
            display: block !important;
        }
        /* 隐藏原生复选框，用label模拟交互 */
        #toggle-input {
            position: absolute;
            left: -9999px;
        }
        label[for="toggle-input"] {
            cursor: pointer;
            color: #0078d4;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <input id="toggle-input" type="checkbox">
    <label for="toggle-input">点击显示内容</label>
    <div class="hidden-content">勾选后展示的内容</div>
</body>
</html>

通过!important强制覆盖默认样式，同时隐藏原生复选框提升交互体验，强化选择器的关联性以适配Outlook网页端的渲染规则。

方法2：使用HTML5原生折叠标签 #

Outlook网页端支持HTML5的<details>和<summary>标签，这是更简洁可靠的内容折叠方案，无需依赖CSS状态选择器：

<details>
    <summary>点击展开/收起内容</summary>
    <p>这里是默认隐藏的内容，点击标题即可切换显示状态</p>
</details>

该方案兼容性好，代码简洁，无需处理复选框的状态关联，是邮件内容显隐的优先选择。

方法3：内联脚本备选方案（仅作应急） #

若上述方法仍无效，可尝试内联JavaScript实现，但需注意部分邮件客户端会拦截脚本，仅作为极端情况的备选：

<input type="checkbox" id="toggle-btn" onclick="document.getElementById('target-content').style.display = this.checked ? 'block' : 'none'">
<label for="toggle-btn">点击切换内容显示</label>
<div id="target-content" style="display: none;">动态显示的内容</div>

内容的提问来源于stack exchange，提问作者jane