Rating Stars

A star rating system html and CSS only.

HTML

<div class="rating">
    <input name="myrating" type="radio" value="5" /><span>☆</span>
    <input name="myrating" type="radio" value="4" /><span>☆</span>
    <input name="myrating" type="radio" value="3" /><span>☆</span>
    <input name="myrating" type="radio" value="2" /><span>☆</span>
    <input name="myrating" type="radio" value="1" /><span>☆</span> 
</div>

CSS

.rating {
   
    direction: rtl;
    text-align: center;
}
.rating > span {
    display: inline-block;
    position: relative;
    width: 1.1em;
}
.rating > *:hover, .rating > *:hover ~ span, .rating:not(:hover) > input:checked ~ span {
    color: transparent;
}
.rating > *:hover:before, .rating > *:hover ~ span:before, .rating:not(:hover) > input:checked ~ span:before {
    content:"\2605";
    position: absolute;
    left: 0;
    color: gold;
}
.rating > input {
    margin-left:-1.1em;
    margin-right:0;
    top:3px;
    width:1.1em;
    height:1.1em;
    position:relative;
    z-index:2;
    opacity:0;
}
body {
    padding: 100px;
}