5 Star Rating HTML CSS

Star rating can be found everywhere. This is a standard rating scale used by popular marketplaces. A star rating is a valuable metric that tells others what most people think about a particular product, app, or movie. A star rating usually has a maximum value of five stars. You allow your users to rate a product using stars. A star means poor; Five is better. By selecting more than one star, all previous stars must be filled. Just copy the code and paste on your post of blog or website.

Star ratings are more attractive and noticeable compared to numbers or text. It is very powerful and flexible because by increasing the number of criteria you can get feedback with great detail.

Step 1: Copy the HTML Code and paste on your post or page of mentioned line

<div class="rate"><br /> <input type="radio" id="star5" name="rate" value="5" /><br /> <label for="star5" title="text">5 stars</label><br /> <input type="radio" id="star4" name="rate" value="4" /><br /> <label for="star4" title="text">4 stars</label><br /> <input type="radio" id="star3" name="rate" value="3" /><br /> <label for="star3" title="text">3 stars</label><br /> <input type="radio" id="star2" name="rate" value="2" /><br /> <label for="star2" title="text">2 stars</label><br /> <input type="radio" id="star1" name="rate" value="1" /><br /> <label for="star1" title="text">1 star</label><br /> </div><br />

Step 2: Copy the CSS Code and paste on your post or page of mentioned line

*{<br /> margin: 0;<br /> padding: 0;<br />}<br />.rate {<br /> float: left;<br /> height: 46px;<br /> padding: 0 10px;<br />}<br />.rate:not(:checked) > input {<br /> position:absolute;<br /> top:-9999px;<br />}<br />.rate:not(:checked) > label {<br /> float:right;<br /> width:1em;<br /> overflow:hidden;<br /> white-space:nowrap;<br /> cursor:pointer;<br /> font-size:30px;<br /> color:#ccc;<br />}<br />.rate:not(:checked) > label:before {<br /> content: '★ ';<br />}<br />.rate > input:checked ~ label {<br /> color: #04AA6D; <br />}<br />.rate:not(:checked) > label:hover,<br />.rate:not(:checked) > label:hover ~ label {<br /> color: #04AA6D; <br />}<br />.rate > input:checked + label:hover,<br />.rate > input:checked + label:hover ~ label,<br />.rate > input:checked ~ label:hover,<br />.rate > input:checked ~ label:hover ~ label,<br />.rate > label:hover ~ input:checked ~ label {<br /> color: #04AA6D;<br />}