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>