Customized checkboxes

I really like this checkbox styles. But they are difficult for most developers. I want to help them. Let’s go?!…

View Pen here

http://codepen.io/radicho/pen/jBJjPb


We have to use label and span tag for better animation and styles:

After that we have to add some css:

This is the main css for the span tag…
Result:

Now we must remove the checkbox from the screen.

Now We must create ::before and ::after selectors.
::before - https://goo.gl/wqJNAu
::after - https://goo.gl/seqI2G

DevTools screenshot

Cursor pointer:

AND … this is our checkbox !
If you want different sizes view this - Larger size:

Thank you for reading
Full css code here: https://goo.gl/TYcg28

View the codepen here: http://codepen.io/radicho/pen/jBJjPb


You can use RSGCheckbox in rsg-components with the same styles- https://www.npmjs.com/package/rsg-components

RSGCheckbox photo

View the documentation:
https://goo.gl/0eUp1N

Like what you read? Give Radi Cho a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.