I've been working on a fairly simple form. After looking to customize the checkboxes, I found a few answers people had given. I went looking at example sites and came up with something that seems to have worked-
Putting checkboxes behind the label layer, adding a border to the label, and putting a colored div over that. The interaction I have set says that when you click, the div goes to full opacity. On second click, it falls back to zero.
The problem I am having is that only the first two boxes work properly. The last two seem to only want to change the second box (?). I've tried a number of things, including doing a separate div with new class, separate label with new class, and a separate interaction. It is causing the same issue.
On a less important note, another issue is that the buttons change spacing when viewed online. How can I fix this?
Can anyone help? Links below (don't mind the design- it's a work in progress).