Try autocomplete off. https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
<input type="checkbox" id="toggle-menu" autocomplete="off"/>
Solution 1 :
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>
<ul>
<li><a href="duckduckgo.com">Link</a></li>
</ul>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.
Comments
Comment posted by Reset checkbox checked state go back from history
Does this answer your question?
Comment posted by developer.mozilla.org/en-US/docs/Web/HTML/Element/…
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 caniuse.com/#feat=mdn-html_global_attributes_autocomplete
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.