Last checked input's css state persist after page reload

Firefox Development
#1

Hi, I use this kind of css to manage the appearance of my input radio button state :

input ~ div {
  background-color: #4a4a4a;
  padding: 8px;
  font-weight: 400;
  height: 100%;
  width: 100%;
}
input:checked ~ div {
  background-color: #363636;
  padding: 8px;
  font-weight: 400;
  height: 100%;
  width: 100%;
}

It works perfectly but when I reload the page, the css rule input:checked ~ div still apply to the last checked while it is no longer checked in the DOM…

for exemple I have 3 buttons :

  1. not checked
  2. not checked
  3. I checked this one, the rule input:checked ~ div is applied

If I reload the page :

  1. checked, return to default, works as designed, but the rule input:checked ~ div is not applied
  2. not checked
  3. not checked, but the rule input:checked ~ div is still applied

Moreover, the third button cannot be clicked again, despite in the DOM it is the first button that have the attribute checked=“checked” after page reloading

I don’t have this problem on other browsers (Safari or Chrome) only with Firefox, I have this version : 94.0.2 (64 bits) for Mac

Has anyone ever experienced this problem ?
Thanks for your help

#2

With a simple reload (Command+R), and assuming the page allows caching, Firefox usually retains user changes to the state of form controls. So in that case the styling sounds correct and the missing check mark is a bit of a mystery.

With a reload bypassing the cache (Command+Shift+R), Firefox usually reverts the state of form controls to the underlying HTML, as modified by scripts, discarding user changes.