Why do these checkboxes work in Safari but not Chrome or Firefox?

Question

I have a webpage that creates dynamic SVG based on checkboxes a user selects. The SVG updates every time the user checks or unchecks a company from the list of checkboxes.

I have a problem with checkboxes in my javascript form handling or CSS. On a Mac, the checkboxes work well in Safari. But not in Chrome or Firefox:

https://www.versionmuseum.com/dh/checkboxes-dont-work

The main CSS file in production is likely the culprit, but I am not CSS-savvy enough to fix the issue. https://www.versionmuseum.com/assets/css/main.css

Thanks for any help!

Answer 1

The problem is actually in the html. The for= attribute of the <label> element needs to match the id= element of the <input> element, in order for clicking the label to change the checkbox state.

So for example, you have:

<label class="checkbox-label">
        <input class="checkbox" type="checkbox" name="company" value="Apple" checked="">
        <label for="human">Apple</label>
      </label>

but it should be:

<label class="checkbox-label">
    <input class="checkbox" type="checkbox" name="company" value="Apple" checked id="human-apple">
    <label for="human-apple">Apple</label>
</label>

And of course remember that ids must be unique on the page.