Avatar for Username

Kërkoni te Asistenca

Shmangni karremëzime gjoja asistence. S’do t’ju kërkojmë kurrë të bëni një thirrje apo të dërgoni tekst te një numër telefoni, apo të na jepni të dhëna personale. Ju lutemi, raportoni veprimtari të dyshimtë duke përdorur mundësinë “Raportoni Abuzim”.

Mësoni Më Tepër

Kjo rrjedhë është arkivuar. Ju lutemi, bëni një pyetje të re, nëse keni nevojë për ndihmë.

Last checked input's css state persist after page reload

  • 2 përgjigje
  • 1 e ka hasur këtë problem
  • 2 parje
  • Përgjigjja më e re nga cor-el

llyomll
llyomll
more options

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

It's for commerce products variations, really annoying as when the customer reload the page, the displayed price is for the first button as designed, but it's the last button that is highlighted…

This issue is not present with other browsers…

Has anyone ever experienced this problem ? Thanks for your help

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 It's for commerce products variations, really annoying as when the customer reload the page, the displayed price is for the first button as designed, but it's the last button that is highlighted… This issue is not present with other browsers… Has anyone ever experienced this problem ? Thanks for your help
Foto të bashkëngjitura ekrani

Ndryshuar nga llyomll

Krejt Përgjigjet (2)

llyomll
llyomll I zoti i pyetjes
more options

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

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Try to ask advice at a web development oriented forum.