Nested Checkboxes in Pure CSS. Is it possible?
I created a website showing off checkboxes with a single-parent checkbox and three-child checkboxes. I have implementations in Vue, React, Vanilla JS, and others. I wanted to see if I could do a CSS-only implementation.
Here is a link to the CSS-only code example: https://codepen.io/jsolly/pen/LEPOmKo
It 'almost' works. The problem arises when all the boxes get checked, and you try to 'uncheck' them.
5 Replies
maybe a bit difficult explained, and im not sure it will work, but maybe you can try
unfortunately I don't have time to try it myself. Hope it will help you a bit further
In the end (and you already note that in your comments too) you wont be able to check the actual states of the checkboxes. So i wonder if a pure css-solution is a viable one.
Are you able to add the css-only attempt onto a codepen ?
It doesn't seem all that possible as you won't be able to actually check or uncheck them bit you could maybe toggle a boolean custom property to track the visual state after users first interactions.
@clevermissfox Here it is!
https://codepen.io/jsolly/pen/LEPOmKo
Would that even be okay, that the visual states are styled but the checkbox isnt actually checked or unchecked? likely want to use the form data which wouldnt be possible without javascript to ensure the checkboxes checked state match their visuals
It would work!
I don’t need the form data, I just need it to ‘visually’ look like it’s working.