Styling radio buttons
Hide/replace radio buttons
CSS:
[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[type="radio"] + span {
display: block;
}
/* the basic, unchecked style */
[type="radio"] + span:before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: .5em;
border: 0.15em solid @base-gray-medium;
box-shadow: 0 0 0 0.1em @base-gray-medium;
margin-right: 0.75em;
transition: 0.5s ease all;
}
/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before {
background: red;
box-shadow: 0 0 0 0.1em @base-gray-medium;
}
/* never forget focus styling */
[type="radio"]:focus + span:after {
content: '\0020\2190';
font-size: 1.5em;
line-height: 1;
vertical-align: -0.125em;
}
Handlebars template markup:
<script id="dealer-list-template" type="text/x-handlebars-template">
<label for="dealer{{id}}" class="col-xs-10 dealerItem">
<input type="radio" value="{{title}}" name="dealers" id="dealer{{id}}">
<span class="dealerTitle">{{title}}</span>
<span class="dealerAddress">{{address}}</span>
</label>
<div class="col-xs-2 distance">{{distance}}</div>
</script>