input_radio_custom1

by aka_SKIff

HTML

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

CSS

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

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

label {
    display: block;
    vertical-align: middle;
    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;
    transform: scale(2);
    transition: opacity 0.2s, transform 0.2s;
}

input[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}