CSS Radios

by ChrisStanyon

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form>
    <div>
        <input id="radioSales" name="department" value="residential-sales" checked="checked" type="radio">
        <label for="radioSales">Sales</label> 
    </div>
    <div>
        <input id="radioLettings" name="department" value="residential-lettings" type="radio">
        <label for="radioLettings">Lettings</label> 
    </div>
</form>

CSS

input[type=radio] { display:none; }
input[type=radio] + label { cursor: pointer; }

input[type=radio] + label:before { font-family: FontAwesome !important; }
input[type=radio] + label:before { content: "\f10c" !important; color: red; margin-right: 5px; }
input[type=radio]:checked + label:before { content: "\f192" !important; color: green; margin-right: 5px; }