five star with css

```html
<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label for="star1" title="Sucks big time">1 star</label>
</fieldset>
  ```

/*隐藏关联的input[radio]按钮*/
.rating:not(:checked) > input {
    display: none;
}

/*定义出未点击时的基础样式*/
.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}
/*必须*/
.rating:not(:checked) > label:before {
    content: '★ ';
}
/*颜色而已*/
.rating > input:checked  ~ label {
    color: lightgreen;
}