Gmail邮件中无JS/外部CSS用复选框隐藏列表的实现方案

Since email clients block JavaScript and often ignore <style> tags in the <head>, we can use CSS :checked pseudo-class + adjacent sibling selectors with a <style> block embedded directly in the <body> (supported by most major email clients). The list will default to visible for clients that don't support this method, which aligns with your requirement.

Here's the modified code:

<body>
<h2>Rules applied to check EMAIL</h2>
<br>
<!-- Replace button with styled label + hidden checkbox -->
<label for="toggle-email" style="cursor: pointer; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5;">
  show lines with invalid or empty datas for this field
</label>
<input type="checkbox" id="toggle-email" style="position: absolute; left: -9999px;">
<ul id="ul1" style="margin-top: 10px;"> invalid EMAIL on line(s) :
<li style="margin-left:20px">12</li>
<li style="margin-left:20px">16</li>
<li style="margin-left:20px">51</li>
<li style="margin-left:20px">52</li>
<li style="margin-left:20px">53</li>
<li style="margin-left:20px">57</li>
<li style="margin-left:20px">62</li>
</ul>
<br>
<h2>Rules applied to check BIRTHDATE</h2>
<br>
<label for="toggle-birthdate" style="cursor: pointer; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5;">
  show lines with invalid or empty datas for this field
</label>
<input type="checkbox" id="toggle-birthdate" style="position: absolute; left: -9999px;">
<ul id="ul2" style="margin-top: 10px;"> invalid BIRTHDATE on line(s) :
<li style="margin-left:20px">12</li>
<li style="margin-left:20px">35</li>
<li style="margin-left:20px">51</li>
</ul>

<!-- Embedded style block in body - only works for supporting clients -->
<style>
  /* Default state: hide lists for clients that support this CSS */
  #ul1, #ul2 {
    visibility: hidden;
  }
  /* Show list when corresponding checkbox is checked */
  #toggle-email:checked + #ul1,
  #toggle-birthdate:checked + #ul2 {
    visibility: visible;
  }
</style>
</body>

How This Works: #

• Hidden Checkbox: We position the actual checkbox off-screen instead of using display: none (some email clients hide display: none form elements, breaking the label association).
• Styled Label: The <label> is styled to look like a button, so users get the same visual experience as the original button. Clicking the label toggles the checkbox.
• Conditional Visibility: For clients that support the embedded <style> block, lists are hidden by default. When the checkbox is checked, the adjacent sibling selector (+) targets the list and makes it visible.
• Graceful Degradation: Clients that don't support the CSS will ignore the <style> block, leaving the lists visible by default (exactly what you asked for).

Key Email Client Compatibility Notes: #

• Major clients like Gmail, Outlook 365, Apple Mail, and Yahoo Mail support this method.
• Older Outlook desktop versions (2016/2019) have limited CSS support, but they'll fall back to showing the lists, which is acceptable.

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