<div class="stars">
    <input class="sr-only" id="star5" name="star" type="radio" value="5" />
    <label for="star5" title="Test"><span class="sr-only">5</span></label>
    <input class="sr-only" id="star4" name="star" type="radio" value="4" />
    <label for="star4"><span class="sr-only">4</span></label>
    <input class="sr-only" id="star3" name="star" type="radio" value="3" />
    <label for="star3"><span class="sr-only">3</span></label>
    <input class="sr-only" id="star2" name="star" type="radio" value="2" />
    <label for="star2"><span class="sr-only">2</span></label>
    <input class="sr-only" id="star1" name="star" type="radio" value="1" />
    <label for="star1"><span class="sr-only">1</span></label>
    <input class="sr-only" id="star0" name="star" type="radio" value="" checked />
</div>

.sr-only {
    clip: rect(0 0 0 0);
    position: absolute;
}

.stars {
    display: inline-flex;
    flex-direction: row-reverse;
    font-size: 1.5em;
}

.stars > label { cursor: pointer; }
.stars > label:before { content: '☆'; }
.stars > input:checked ~ label:before { content: '★'; }