Checkbox toggle in Chrome and Opera

Question

Steps to reproduce the issue:

1. In your browser Settings select Continue where you/I left off under On startup .
2. Navigate to the demo .
3. Check the checkbox.
4. Edit the text.
5. Close your browser and reopen it. Or duplicate/clone the tab.

Now as you see the checkbox is checked, but the textarea isn't colored.
I tried it in the latest version of Chrome and Opera in Windows 10. I'm not sure about Safari, but it probably behaves the same way.

Questions:

• Why does it happen?
• What's a cross-browser solution?

Answer 1

Try

window.onload = function() {
  document.getElementById('colorsToggle').onchange = function() {
    document.getElementById('textField').classList.toggle('tan');
  }
  document.getElementById('textField').classList.toggle(document.getElementById('colorsToggle').checked ? "tan" : "white");
};