Untitled

dabblet.css

@font-face {
	font-family: '1Regular';
	src: 
		local('Oleo Script'), 
		local('OleoScript-Regular'), 
		url('https://dl.dropbox.com/u/1744447/fonts/stars-webfont.woff') format('woff');

}

.b-rating--wrap legend {
    display: none;
}

fieldset
{
	border: 0;
	padding: 0;
}

.b-rating 
{
    float: left;
    background: linear-gradient(top, #d5d5d5 0%, #717171 100%);
}

.b-rating__item-input {
    position: absolute;
    visibility: hidden;

    z-index: -1;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}


.b-rating__item-star {

    cursor:pointer;
    font: 22px/24px "1Regular", Arial, sans-serif;
    color: #fff;
    position: relative;
    float: right;

}

.b-rating__item-star:hover, 
.b-rating__item-input:not(:checked) + .b-rating__item-star:hover, 
.b-rating__item-input:not(:checked) + .b-rating__item-star:hover ~ .b-rating__item-star 
{
	background: linear-gradient(top, #fff600 0%, #ff6c00 100%);
}

.b-rating__item-input:checked ~ .b-rating__item-star:hover,
.b-rating__item-input:checked ~ .b-rating__item-star:hover ~ .b-rating__item-star,
.b-rating__item-star:hover ~ .b-rating__item-input:checked ~ .b-rating__item-star {
    background: #000;

}

.b-rating__item-input:checked + .b-rating__item-star, .b-rating__item-input:checked  ~ .b-rating__item-star  {
    background: #a20000;
}


.b-rating .b-rating__item-input + .b-rating__item-star:active {

    background: #ABE9F7;
}

dabblet.html

     <form  class="b-rating--wrap" style="float:left; overflow:hidden;">
          <fieldset>
              <legend>Star Rating</legend>
              <div class="b-rating">
                  <input type="radio" name="rating" value="1" id="star_1" class="b-rating__item-input">
                  <label class="b-rating__item-star b-rating__item-star_1" for="star_1">1</label>

                  <input type="radio" name="rating" value="2" id="star_2" class="b-rating__item-input">
                  <label class="b-rating__item-star b-rating__item-star_2" for="star_2">2</label>

                  <input type="radio" name="rating" value="3" id="star_3" class="b-rating__item-input">
                  <label class="b-rating__item-star b-rating__item-star_3" for="star_3">3</label>

                  <input type="radio" name="rating" value="4" id="star_4" class="b-rating__item-input">
                  <label class="b-rating__item-star b-rating__item-star_4" for="star_4">4</label>

                  <input type="radio" name="rating" value="5" id="star_5" class="b-rating__item-input">
                  <label class="b-rating__item-star b-rating__item-star_5" for="star_5">5</label>
              </div>
          </fieldset>
  </form>

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}