Streaming live at 10am (PST)

Simple checkbox styling metod

Hello Webflowers!

Here my simple checkbox styling method,
you can clone project and copy/paste checkbox element and modify it…

Example — https://simple-checkbox.webflow.io/

Clonable project — https://webflow.com/website/Simple-Checkbox-with-interaction?s=simple-checkbox#

If you have any questions, fill free to contact me!

Cheers, Dof!

3 Likes

Thank you – I’ve used your script, and it works well. I’ve used a litte re-structuring and styling to get a clickable label too.

For anyone else, there is one ISSUE with this checkbox setup: Browsers by default cache the ‘checked’ status of the hidden checkbox element. So, when a user checks the box, then uses the browsers Back and Forward buttons to navigate through the browser history, the hidden box will still be checked when they come back to the form. This is then invisible to the user because the interaction won’t have triggered and the custom tick is off.

The simple solution is to add autocomplete="off" to the checkbox, which would look like this in Webflow:

52

Hello, thank you for this!

I just can’t find what interacting with the new checkmark image to make it appear and dissapear, is it an interction?

Thank you!