仅用CSS关联标签与复选框：跨浏览器及Outlook网页版兼容方案

你遇到的问题核心是部分环境对label与input的顺序、可见性支持有差异，调整结构加视觉隐藏就能解决，同时保留:checked的交互逻辑：

步骤说明 #

• 把复选框放在标签前面，确保for/id关联在更多环境（包括Outlook网页版）中正常触发
• 用视觉隐藏CSS隐藏复选框，避免影响布局，同时保证它能被标签触发（比display: none兼容性更好）
• 保留:checked控制内容显示的逻辑

完整代码 #

<!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>
/* 视觉隐藏复选框，保持可交互性 */
#show {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

#content {
    display: none;
}

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

/* 可选：给标签加鼠标指针样式，提示可点击 */
label[for="show"] {
    cursor: pointer;
}
</style>
</head>

<body style="height:50px">
    <input type="checkbox" id="show">
    <label for="show">Click Me to select checkbox</label>
    
    <span id="content">Text visible when checkbox is clicked </span>
</body>

</html>

为什么这样有效？ #

• 调整元素顺序后，label与input的关联在Outlook网页版等环境中更稳定
• 视觉隐藏的CSS不会让复选框完全脱离文档流，保证标签点击能触发复选框状态变化
• 原有的:checked兄弟选择器逻辑依然生效，能正常控制内容的显示/隐藏

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