JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<label>
    <input type="checkbox" />
    Hello
</label>

<label>
    <input type="checkbox" />
    Take it easy
</label>

<label>
    <input type="checkbox" />
    Take it easy
</label>

<label>
    <input type="checkbox" checked />
    Whats up
</label>

<br/>

<label>
    <input name="good" type="radio" />
    Select me
</label>

<label>
    <input name="good" type="radio" checked />
    Select It
</label>

<label>
    <input name="good" type="radio" />
    Hello
</label>

SCSS

label {
    position: relative;
}

.frm-checkbox {
    input {
        position: absolute;
    }
    &:before {
        position: absolute;
        display: block;
        top: 0px; left: 0px;
        width: 12px; height: 12px;
        background: yellow;
    }
}

.frm-radio {
    input {
        position: absolute;
    }
    &:before {
        position: absolute;
        display: block;
        top: 0px; left: 0px;
        width: 12px; height: 12px;
        border-radius: 50%;
        background: yellow;
    }
}

.frm-checkbox-checked {
    &:before {
        position: absolute;
        display: block;
        top: 0px; left: 0px;
        width: 12px; height: 12px;
        background: red;
    }
}

.frm-radio-checked {
    &:before {
        position: absolute;
        display: block;
        top: 0px; left: 0px;
        width: 12px; height: 12px;
        border-radius: 50%;
        background: red;
    }
}

JavaScript

$('label').each(function(){
    var $this = $(this);
    var $checkbox  = $this.find('input[type="checkbox"]');
    var $radio     = $this.find('input[type="radio"]');
    
    if ($checkbox.length) {
    }
    
    if ($radio.length) {
        
    }
    
});