Star ratings, thanks to http://dabblet.com/gist/1718992 (https://twitter.com/dmfilipenko/status/164800384953614336) for the trick: right-float radio buttons so they display in the right order. I think the dabblet's labeled order was wrong, but I used FontAwesome instead of sprites (you'll need to include its CSS), and I didn't finish porting ove…

rating.html

  <span class="rating">
    <input id="star-5" name="radioradio" type="radio" value="5"><label for="star-5"></label>
    <input id="star-4" name="radioradio" type="radio" value="4"><label for="star-4"></label>
    <input id="star-3" name="radioradio" type="radio" value="3"><label for="star-3"></label>
    <input id="star-2" name="radioradio" type="radio" value="2"><label for="star-2"></label>
    <input id="star-1" name="radioradio" type="radio" value="1"><label for="star-1"></label>
  </span>
  

style.css

.rating {
    font-family: FontAwesome;
    display: inline-block;
}

.rating input {
    display: none;
}

.rating label {
    float: right;
    padding-left: 2px;
    font-size: 120%;
}

.rating label:before {
    content: "";
}

.rating input:checked+label:before,
input:checked~label:before,
.rating:hover label:hover:before,
.rating:hover label:hover~label:before {
    content: "";
    color: #E3CF7A;
}