Svi smo sigurno više puta koristili checkbox ili radio tipke. Jedna od najgorih stvari u vezi njih je što im je nemoguće mjenjati izgled. Ne samo da im je nemoguće promijeniti izgled nego izgledaju drugačije u svakom internet pregledniku, što je dosta nezgodno ako želite neku dobro dizajniranu web stranicu.
No i za to postoji rješenje, jednostavno ćemo ih sakriti, ali i dalje koristiti njihove funkcionalnosti koristeći samo html i css.

U ovom tutorialu pokazat ću vam kako napraviti color material style slide checkbox i radio tipke.

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 - služi kao kontenjer u kojem se nalazi čitava checkbox 
• <p> - služi kao label koji će stajati uz checkbox 
• slide-checkbox-label - služi kako kontenjer za color checkbox slider
• checkbox-input - je input tag koji ćemo sakriti u css-u a koristiti njegove funkcionalnosti
• always-in - je zapravo kontenjer vidljivog djela checkbox slider-a
• slide-checkbox-switch - je bijeli krug sa material style shadow-om
• slide-checkbox-back - je pozadinska putanja po kojoj se kreće slide-checkbox-switch
• slide-checkbox-circle - je boja u slide-checkbox-switch koja se pojavljuje samo kad je checkbox  aktivan, odnosno "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 tipke imaju samo jednu razliku, a to je da input type="radio". Sve ostalo je isto.