Colourful flat material style slide checkbox and radio inputs

checkboxradioflatmaterialstyleanimation

Colourful flat material style slide checkbox and radio inputs Tutorial by Mirko Zovko | 15. Mar. 2020.

We are all using checkbox and radio buttons. Almost every form have checkbox so you can't avoid them. One of the worst and most frustrating things about using those buttons is inability to change the way they look, and that is not all, they also have different look in every browser, what isn't so good if you want a well-designed website.

But don't worry because of that. In this tutorial I'll show how to create material, flat style, slide checkbox and radio inputs with pure css, nothing else.

To create some structure, I put everything in one div with class slide-checkbox. In that div I put one paragraph tag that I used as label for checkbox and label tag I used to hide input (checkbox) and to show slide button instead.


Special part of the html is span class with name always-in. That element contain entire new checkbox style.

  • slide-checkbox-switch - is a white circle with material shadow style
  • slide-checkbox-back - is the background path of slide-checkbox-switch
  • slide-checkbox-circle - is the color in the slide-checkbox-switch that appears only when the checkbox is activated - "checked"

Code for checkbox and radio is the same, so you can use it for both. Finish and working code you can see on jsFiddle below. Try to edit text or colors yourself and see the differences. Just one more notice, especially see the css part below, because that part is checking state of the checkbox, is it checked or not, and base on that button is getting his state style.