Edit in JSFiddle

<div class="ui-form">
    <form>
        <fieldset>
            <div>
                <label for="check01">Check 01</label>
                <input type="checkbox" id="check01" />
            </div>
            <div>
                <label for="check02">Check 02</label>
                <input type="checkbox" id="check02" />
            </div>
        </fieldset>
        <fieldset>
            <div>
                <label for="radio01">Radio 01</label>
                <input type="radio" id="radio01" name="question01" />
            </div>
            <div>
                <label for="radio02">Radio 02</label>
                <input type="radio" id="radio02" name="question01" />
            </div>
        </fieldset>
    </form>
</div>

$color-main: #444;
$color-sushi: rgb(111, 182, 52);

body { font: 1em/1.4 sans-serif; color: $color-main; }
.ui-form { padding: 20px; 
    fieldset { 
        margin-bottom: 10px; 
        label { 
                padding-right: 10px; 
        }
    }
}
.fancyUi-on {
    [type=checkbox], [type=radio] {
        position: relative;
        z-index: 3;
        top:1px;
        cursor: pointer;
        width: 16px;
        height: 16px;
        opacity: 0;
    }
    .fake-checkbox {
        position: relative;
        display: inline-block;
        z-index: 2;
        bottom: -2px;
        margin-left: -18px;
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        border-radius: 1px;
        background: #fff;
        padding: 1px;
        cursor: pointer;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        div {
            width: 100%;
            height: 100%;
            background: none;
            transition: background 0.1s;
        }
    }
    .fake-radio {
        position: relative;
        display: inline-block;
        z-index: 2;
        bottom: -2px;
        margin-left: -18px;
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        border-radius: 1px;
        background: #fff;
        padding: 1px;
        cursor: pointer;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        div {
            width: 100%;
            height: 100%;
            background: none;
            transition: background 0.1s;
            border-radius: 50%;
        }
    }
    [type=checkbox]:checked + .fake-checkbox > div {
        background: $color-sushi;
        border-radius: 1px;
        transition: background 0.3s;
    }
    [type=radio]:checked + .fake-radio > div {
        background: $color-sushi;
        border-radius: 1px;
        transition: background 0.3s;
        border-radius: 50%;
    }
    [type=checkbox], [type=checkbox] ~ label {
        &:hover + .fake-checkbox div {
            background: rgba(0, 93, 57, 0.2);
            transition: background 0.3s;
        }
        &:checked:hover + .fake-checkbox div {
            background: $color-sushi;
        }
    }
    [type=radio], [type=radio] ~ label {
        &:hover + .fake-radio div {
            background: rgba(0, 93, 57, 0.2);
            transition: background 0.3s;
        }
        &:checked:hover + .fake-radio div {
            background: $color-sushi;
        }
    }
}

// fancy checks'n'radios
$.fn.fancyUI = function () {
    var checkbox = $(this).find('[type=checkbox]'),
        radio = $(this).find('[type=radio]');
    $(this).addClass('fancyUi-on');
    checkbox.after('<div class="fake-checkbox"><div></div></div>');
    radio.after('<div class="fake-radio"><div></div></div>');
};
$(function () {
    $('.ui-form').fancyUI();
});