Solution 1 :

Try autocomplete off.

<input type="checkbox" id="toggle-menu" autocomplete="off"/>

Solution 2 :

Adding autocomplete=”off” stops browser from remembering the checkbox state.

<input type="checkbox" id="toggle-menu" autocomplete="off" />

Problem :

I’m using a checkbox to create a mobile menu. Simplified, it looks like that:

input, ul {
  display: none;
label {
  cursor: pointer;
input:checked ~ ul {
  display: block;
<input type="checkbox" id="toggle-menu" />
<label for="toggle-menu">Menu</label>
  <li><a href="">Link</a></li>

It works well, except for a thing: when the user navigates in another page using the menu, and then go back is the history, the checkbox state is kept, and thus the menu is displayed.

Is it possible to prevent this, preferably without Javascript? To say it in another words, I’d like the menu to never be displayed when a page is accessed to, even through the navigation in the history. The user must click on the label to see the menu.


Comment posted by Reset checkbox checked state go back from history

Does this answer your question?

Comment posted by…

It works, at least on Firefox and Chrome! Is it reliable, though? I’ve read its documentation, and unless I’m misunderstanding something, it seems that it is invalid on a checkbox type:

Comment posted by

I just checked

Comment posted by Boiethios

I meant the attribute

Comment posted by Gene Sy

well the description says “except checkbox” so i think it should work fine

Comment posted by Boiethios

It says “This attribute is valid for all input types except checkbox”. That means that it is invalid on a checkbox.