[Solved ]Checkbox disappears when published in Safari & Chrome

Hellu!

Just finishing up this site for a client, but I have a very annoying problem with my checkboxes. The checkbox itself is visible in the designer, but once published they are gone. The label is visible though. Happens i both Chrome and Safari.

If someone can find out what the problems is, I’m thankful!

The problem is on the page “Hitta hit” and the checkboxes are part of the contact form on the lower part of the page.

Preview: https://preview.webflow.com/preview/ystegarncafe?preview=4fe8e33ccc38163bb3c82c9e33d3aae4
Live site: http://ystegarncafe.se

Thanks in advance!

Hmmm. Thought maybe it was a z-index issue but I couldn’t quickly isolate an issue, there are a lot of layers/divs there. Did you try just adding a simple form not so nested to see what happens? Not that nesting like that was bad just trying to help think it through.

Good idea! I dropped a complete unstyled form into the section (not in the container inside the section, but on the section itself) but still the actual checkbox did not show up, just the label. So its probably not a Z-index problem. I had them visible on publish earlier today and all I’ve done is doing some tablet and mobile optimizing on them. But since the checkbox show up on mobile in Safari, it’s rather something wacky with my browsers!

Okay, got it!

Apperantly, in order to remove the default rounded form fields in mobile Safari, there was this line included in the code;

input, textarea {
-webkit-appearance: none;
border-radius: 0; }

That webkit-appearance was the root of all evil!

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.