Pangloss Pangloss - 1 year ago 102
CSS Question

Reset checkbox checked state go back from history

In the following example, I use checkbox for making a pure CSS dropdown navigation, also available in this jsFiddle example.

Open that fiddle, click "Menu", click "Link 1", and click the "Back" button on the browser toolbar, as you can see the checkbox remains checked, so the navigation is still open.

My question is - would it be possible to reset that checkbox to unchecked automatically when going back from the browser history? Any suggestions please? Do I need to Javascript/jQuery?


<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
<li><a href="//">Link 1</a></li>


#n {
display: none;
#m:checked ~ #n {
display: block;

Answer Source

No need for JS or CSS, just add autocomplete="off" to the checkbox. This will prevent the browser from caching the 'checked' status.


Also, if you have multiple checkboxes, I beleive you can add autocomplete="off" to the form element to apply the effect to all inputs fields.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download