Colorful flat material slide checkbox

colorful flat material radio and checkbox slider
26.11.2017

We all use checkbox and radio buttons. One of the worst things about using those buttons is the inability to change the way they look. Not only does it make it impossible to change the why they look they also look different in every browser, which is quite inconvenient if you want a well-designed website.
But there is a solution for that, we will simply hide them but still use their functionality using only html and css.

In this tutorial, I'll show you how to make a color material style slide checkbox and radio buttons.

checkbox

<div class="slide-checkbox">
        <p>Slide checkbox 2</p>
        <label class="slide-checkbox-label" for="checkbox_id">
            <input type="checkbox" class="checkbox-input" id="checkbox_id"/>
            <span class="always-in">
                <span class="slide-checkbox-switch"></span>
                <span class="slide-checkbox-back"></span>
                <span class="slide-checkbox-circle" style="background-color: #83a7f7;"></span>
            </span>
        </label>
    </div>
  • slide-checkbox - is container for entier checkbox 
  • <p> - is used like label of checkbox 
  • slide-checkbox-label - is subcontainer for color checkbox slider
  • checkbox-input -is the input tag that we will hide in css and use its functionality
  • always-inis actually the container of the visible part of the checkbox slider
  • slide-checkbox-switch - is a white circle with material shadow style
  • slide-checkbox-backis 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 actived - "checked"

radio

<div class="slide-checkbox">
        <p>Slide radio</p>
        <label class="slide-checkbox-label" for="radio_id">
            <input type="radio" class="checkbox-input" id="radio_id"/>
            <span class="always-in">
                <span class="slide-checkbox-switch"></span>
                <span class="slide-checkbox-back"></span>
                <span class="slide-checkbox-circle" style="background-color: #83a7f7;"></span>
            </span>
        </label>
    </div>

radio button only have one difference, and that is input type="radio". Everything else is the same.