DC Custom Radio as of Jan 23

DC Custom Radio as of Jan 23

by pj_js15

HTML

<!--
<label class='label' for='rd1'></label>
<input name='test' id='rd1' type="radio" /> Radio Button

<label class='label' for='rd2'>
    <input name='test' id='rd2' type="radio" /> 
    <div class='text'>Two</div>
</label>
-->

<div class="one-col-each">
    <div class="fieldlist">
        <input name='test' id='rd1' type="radio" />
        <label for="rd1">First Radio</label>
    </div>
    <div class="fieldlist">
        <input name='test' id='rd2' type="radio" />
        <label for="rd2">Radio two</label>
    </div>
    <div class="fieldlist">
        <input name='test' id='rd3' type="radio" />
        <label for="rd3">Lorem ipsum</label>
    </div>
</div>

<div class="single-line">
    <div class="fieldlist">
        <input name='test' id='rd4' type="radio" />
        <label for="rd4">First Radio</label>
    </div>
    <div class="fieldlist">
        <input name='test' id='rd5' type="radio" />
        <label for="rd5">Radio two</label>
    </div>
    <div class="fieldlist">
        <input name='test' id='rd6' type="radio" />
        <label for="rd6">Lorem ipsum</label>
    </div>

</div>

CSS

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid #CCC;
    border-radius: 50%;
    background-color: #FFF;
    outline: 0;
}

input[type="radio"]:checked {
    background-color: #7226E0;
    width: 30px;
    height: 30px;
    border: 4px solid white;
    box-shadow: 0 0 2px grey;
}

.fieldlist label {
    position: relative;
    top: -10px;
}

.single-line {
    padding-top: 100px;
}

.single-line .fieldlist {
    display: inline;
}