input_radio_custom1

by aka_SKIff

HTML

<form action="">
    <label class="rb-label">
        <input type="radio" name="radioname" id="a1"> Я радио-кнопка
    </label>
    <label class="rb-label">
        <input type="radio" name="radioname" id="a3"> Я радио-кнопка 2
    </label>    
</form>

CSS

body {
    font-family: Arial, sans-serif;
}

input[type="radio"] {
    display: none;
}

label {
    display: block;
    position: relative;
    padding-left: 16px;
}

label:before {
    content:'';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border:1px solid #ccc;
    position: absolute;
    left: 0;
    top: 2px;
}

label:after {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    background: green;
    border-radius: 3px;
    left: 4px;
    top: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

label.checked:after {
    opacity: 1;
}

JavaScript

var $inputs = $('input[type="radio"]');

$inputs.on('change', function(){
	var $me = $(this),
        $label = $me.closest('label'),
        $labels = $me.closest('form').find('.rb-label');

    $labels.removeClass('checked');
    if ($me.prop('checked')) {
        $label.addClass('checked');
    }
});