Checkbox personalizzati in javascript e css

Uno dei problemi che troviamo più frequentemente durante la realizzazione di un sito web è la personalizzazione di alcuni elementi, uno di questi è l’input checkbox.

In questa guida vi mostrerò come poter creare dei “finti checkbox” che sostituiranno i nostri input originali e, dato che questi nuovi elementi saranno dei comunissimi div sarà possibile personalizzarne il css senza alcuna restrizione.

See the Pen Checkbox javascript and CSS – Targetweb.it by Riccardo Mel (@riccardomel) on CodePen.

Per prima cosa creiamo il css del nostro nuovo checkbox

.customCheckbox {
    width: 60px;
    height: 30px;
    border-radius: 15px;
    float: left;
    background-color: rgb(123, 129, 123);
    position: relative;
}

.customCheckbox::after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background: #fff;
    transition-duration: .3s;
    transition-timing-function: ease;
}

.customCheckbox.active {
    background-color: rgb(21, 146, 21);
}

.customCheckbox.active::after {
    left: calc(100% - 28px);
}

Abbiamo creato uno stile per l’elemento .customCheckbox (questo sarà il div che sostituirà i checkbox) e tramite ::after è stato aggiunto al suo interno un elemento che cambierà posizione a seconda se il div principale avrà la classe active oppure no, per fare in modo che l’effetto non sia statico abbiamo assegnato la proprietà transition-duration così da farlo cambiare tramite un animazione e non istantaneamente

Ora dobbiamo fare in modo che i checkbox vengano nascosti e al loro posto venga inserito il nostro nuovo div, per farlo utilizzeremo javascript

var checkboxes = document.querySelectorAll("input[type=checkbox]")
checkboxes.forEach(function (elem) {
    var box = createBox()
    if (elem.checked) box.classList.add("active")
    elem.before(box)
    elem.style.display = "none"

    box.addEventListener('click', function () {
        this.nextSibling.click()
        this.classList.toggle("active", this.nextSibling.checked)
    })
})

function createBox() {
    var box = document.createElement('div')
    box.classList.add('customCheckbox')
    return box
}

Come potete vedere abbiamo nascosto tutti gli input di tipo checkbox e prima di questi è stato inserito il nostro nuovo div con classe “customCheckbox”.

Al click dell’input sarà aggiunta o tolta a questo la classe “active” a seconda se l’input suo parente (cliccato dinamicamente dopo questo evento) sarà checked oppure no.

Spero che questa guida vi sia stata d’aiuto e per qualsiasi cosa non esitate a chiedere nei commenti.

I nostri partner, Casino Midas Italia, offrono un’esperienza di gioco unica e sicura per i giocatori italiani.