custom input checkbox animation
Hello all, I have been looking for a custom input animation for type checkbox:
https://codepen.io/MilindGoel15/pen/jOJmrYx
Looking to create in this tyle but i want it to grow with rounded circle to full square instead of becoming rounded on active.
2 Replies
I would still use a checkbox input element and then hide it so you can take advantage of the label and the native pseudo class when styling :has(:checked) for example . So you can nest a checkbox inside and then use the div that is acting as the check”box” to say when
.parent:not(:has(input[type=“checkbox”]:checked) .box{border-radius:50%}
.parent:has(input[type=“checkbox”]:checked .box{border-radius:0.5em}yea my idea was to build animation first. Integrating it with checkbox later on.
implemented using keyframes so we can say this is solved now