如何阻止复选框状态在浏览器历史记录中保留？

这确实是纯CSS菜单实现里一个容易踩的小坑！浏览器会默认保留表单控件（比如复选框）的状态，所以当用户从跳转后的页面通过历史记录返回时，之前勾选的复选框还是处于选中状态，导致菜单一直展开着。不用JavaScript的话，有几个简单有效的方案可以解决：

方案1：给复选框添加autocomplete="off"属性 #

直接在你的复选框标签里加上autocomplete="off"，就能阻止浏览器记住这个控件的状态：

<input type="checkbox" id="toggle-menu" autocomplete="off" />
<label for="toggle-menu">Menu</label>
<ul>
  <li><a href="duckduckgo.com">Link</a></li>
</ul>

对应的CSS保持不变：

input, ul { display: none; }
label { cursor: pointer; }
input:checked ~ ul { display: block; }

原理：浏览器的自动完成功能不仅会记住输入框的内容，也会记住复选框的勾选状态。autocomplete="off"会告诉浏览器不要保存这个控件的任何状态，每次页面加载（包括历史返回）都会重置为默认的未勾选状态。

方案2：用<form>包裹并设置autocomplete="off" #

如果你的页面里有多个表单控件，或者想统一管理状态保存行为，可以把整个菜单相关的表单元素放在<form>标签里，并给form添加autocomplete="off"：

<form autocomplete="off">
  <input type="checkbox" id="toggle-menu" />
  <label for="toggle-menu">Menu</label>
  <ul>
    <li><a href="duckduckgo.com">Link</a></li>
  </ul>
</form>

CSS同样不需要修改。这个方法的好处是，form标签的autocomplete属性会作用于内部所有的表单控件，一次性解决多个控件的状态保留问题。

为什么这些方法有效？ #

浏览器的“表单状态记忆”是为了提升用户体验，比如让用户不用重复填写表单，但在菜单这种场景下反而会造成困扰。上面的两种方法都是通过禁用特定控件或表单的自动完成/状态记忆功能，让页面每次加载（包括从历史记录返回）时，复选框都回到默认的未勾选状态，菜单也就默认隐藏了。

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