WTS - Custom Form (Radio)

by Paulo Ávila

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/FontAwesome.otf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.svg"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.ttf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.woff"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css">
<form>
    <input id="price-total" type="radio" name="price" value="total">  
    <label for="price-total">total</label>
    <input id="price-nightly" type="radio" name="price" value="nightly" checked>  
    <label for="price-nightly">per night</label>
    <br>
    <input id="price-person" type="radio" name="price" value="person" class="invalid">  
        <label for="price-person">pers/day</label>
    <input> 
</form>

SCSS

body { font: 11px Arial; }

$input-radio-color-idle: #acacac;
$input-radio-color-hover: #4fd0e8;
$input-radio-color-invalid: #f25c66;
$radio-button-width: 11px;


input[type=radio] {
    //display: none;
    outline: none;
    position: absolute;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);

    &[class~="invalid"] + label:before { border-color: $input-radio-color-invalid; }
    /* &[required] + label:after { background-color: $input-radio-color-invalid; } */

    &:checked {
        /*
        & + label:before {
            font-family: 'FontAwesome';
            content: "\F111";
            text-align: center;
            line-height: $radio-button-width;
            font-size: $radio-button-width * .6;
            font-size: 7px;
        }
        //*/

        // set the background color for the different states
        & + label:before { background-color: $input-radio-color-idle; }
        &[class~="invalid"] + label:before { background-color: $input-radio-color-invalid; }
        & + label:hover:before,
        &:hover + label:before { background-color: $input-radio-color-hover; }

        /*
        // generates the inner circle
        & + label:after {
            content: "";
            position: absolute;
            top: 4px;
            left: -13px;
            display: inline-block;
            width: $radio-button-width - 4;
            height: $radio-button-width - 4;
            border-radius: 50%;
            background-color: $input-radio-color-idle;
        }
        //*/
    }

    & + label {
        position: relative;
        margin: 0 15px 0 $radio-button-width + 3px;

        // generates the (hollow) radio button to the left of the label
        &:before {
            content: "";
            position: absolute;
            top: 1px;
            left: -$radio-button-width - 5px;
            display: inline-block;
            width: $radio-button-width;
            height:...