Add CSS class / alter state by using checkbox

Design help Custom code
1

Hi all,

I am working on creating accessibility controls for my client.
I’ve created a module with switch toggles and was wondering how I can expand this to control other elements. Say when toggle Grayscale is selected, it applies a class to Page Wrapper.
I tried CSS code to apply certain styles, see the code below, but it doesn’t work:
Custom CSS

.toggle-checkbox:checked ~.toggle-bg { background-color: #ff38ff; } .toggle-checkbox:checked ~.toggle-dot { left: 26px; } .toggle-checkbox:checked ~.toggle-dot { background-color: #ffffff; } .toggle-checkbox:checked ~.body { filter: grayscale(100);}

No matter how much I have tried, checking the box does not affect body, and does not apply the filter, but changes other properties such as position of the toggle switch and the colour.

If someone could help please, that would be grand :slight_smile:

Here is my site Read-Only: LINK. Webflow - Disability Football Collective
(how to share your site Read-Only link)

2

Would you be open to using JavaScript for this?

3

Hi there,

I found a JS solution (kind of) which works, but now I am facing other issues - affecting multiple classes and keeping those classes activated persistently while navigating from page to page