Custom check-boxes and how to keep them checked

Trying to achieve the effect overtongraphics has for his contact page. Check it.

Its got custom images within them, I know I can achieve this, but what I am attempting to achieve is how he manages to customize the borders of each image when they click and most importantly how THEY stay focused after you click them.

I would like to have four to five options to choose from and when one is clicked the image and box (not the checkbox) stays focused until un clicked.

1 Like

The way @OvertonGraphics (hi Overton!) styles his checkboxes is veeeery clever. Basically, he styles the chckbox, giving it a larger dimension and masking it with opacity:0. The rest of the behavior (color etc) is handled by other elements in the tick block.

He’s kind enough to let us open his site in Webflow, so you can analyse, reverse engineer what he did. His project page is here: https://webflow.com/website/Overton-Graphics and you can click on “Open in Webflow.”

1 Like

Thanks @vincent :slight_smile:

Yes please let me know if reverse engineering it is ok for you - its a lil complex to type out the steps but just keep finding all the elements and editing them. I believe theres also an interaction in there called “checkbox selected” i’ve forgotten which exact element its tied to but apart from that its pretty much just customising like you would divs and images etc.

In fact I think the text and images are just absolute positioned text and images within the checkbox itself (a while since i made it)

All native to webflow - no custom code

Only issue is they are un-selectable on tablet and mobile - at least on the iPad and iPhone anyway. - Anyone know of a fix to that? :smile:

Cheers!

To me it’s ok, even though it was clever enough not to be evident at first sight. I had to remove the styles one by one and I only noticed the opacity at the very last moment, that’s like the sun shining in my face suddenly, you know (: The rest was just evidence, work and fine tuning.

However, for others it can be much less evident/easy. I wish I had time to deconstruct it and make a step-by-step on my sandbox, it’s worth it because it seems to work flawlessly (let aside the modile behavior). If one day you have time to make a tuto on that i’m sure it will be a successful one.

For now I don’t see one. I’d hide the form alltogether for handsets and craft a dedicated one only for these devices.

You guys are awesome!! Coming in huge thanks so much!

1 Like