Checkboxes not displaying Chrome - Work in other browsers

This line in your CSS:

-webkit-appearance: none;

In the style rule for input, button, select, textarea is breaking things for you.

If you give width 0px to a checkbox in Firefox, you'll be able to see it but if you open the same code in Chrome, the checkbox will be invisible.

You have defined the style rule:

-webkit-appearance: none;

defined for input, button, select, textarea, you have to remove it and will work.

You have also a JS error in console: Uncaught ReferenceError: containerz is not defined, check it out.

I am answering on a broader level to those that are running into this issue of checkboxes not showing up in Chrome. And were directed here by google. You may also have this problem in Safari since both are currently using WebKit.

We ran into this issue on our own website where the checkboxes and radio inputs were not displaying properly. But fixed it by adding this to our CSS.

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

Now it works fine.

As you can see, another developer had added -webkit-appearance: none; just like in your case. In our case it was because I had started with a theme.

But to make absolutely sure that the inputs show up, it is safe to just declare those rules in your CSS. In this page I placed the styles in the <style> tag (which I don't recommend) but I took the screenshot when I was still testing. The better practice would be to remove the conflicting styles and add styles in the appropriate folder.

Additional Resources:
https://css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
What is WebKit and how is it related to CSS?
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html