Form Checkbox SVG Issues

support
1

I don’t believe this is a Hugo problem so I hope it’s ok to ask it here…

I’m migrating a site from static HTML to Hugo + Forestry (thanks to @budparr’s bump for Forestry) and their form uses SVG for checkbox inputs. The problem is the SVG’s aren’t displaying in the inputs when checked. No errors are showing in the dev console so I originally thought it was a path error (like @gangely’s sub-domain image path issue this dev site is on a sub domain). However I’ve since changed the SVG path to an absolute URL and the SVGs still don’t show when checked so now I have no idea what the problem is.

Can anyone help?

  • If you click the form’s first checkbox “I accept the Terms and conditions” you see the checkbox doesn’t get get filled with the SVG but the filed is being checked (I believe)

  • If you click the “Register Your Event” button without the form fields filled in you see the validation errors; now you can check the first checkbox and see the validation errors disappearing and appearing when you check/uncheck the box (even though no “check” appears)

  • The css class for the input is .form .checkbox-input:checked~.checkbox-indicator

    .form .checkbox-input:checked~.checkbox-indicator
    -webkit-background-size: 70% 70%;
    background-size: 70% 70%;
    background-image: url(“https://and.netlify.com/img/svg/icon-tick-01.svg.html”);

2

This is a stab in the dark, but I don’t think native browser behavior will load a .html extension as a background image. Have you tried this instead (after changing the image file, that is):

background-image: url(“/img/svg/icon-tick-01.svg”);
1 Like
3

You are a life saver @rdwatters. Thank you, thank you, thank you.

1 Like