Simple 5-star rating with CSS: hover.

Radio button is being used to select star ratings CSS is used to make them appear as Star.


Insert The Input fields below to the form:-

  • CSS
.rate-area {
    border-style: none;

.rate-area:not(:checked) > input {

.rate-area:not(:checked) > label {
    float: right;
    width: .80em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 40px;
    line-height: 32px;
    color: lightgrey;
    margin-bottom: 10px !important;

.rate-area:not(:checked) > label:before {
    content: '★';

.rate-area > input:checked ~ label {
    color: #e8262d;
    text-shadow: none;

.rate-area:not(:checked) > label:hover,
.rate-area:not(:checked) > label:hover ~ label {
    color: #e8262d;

.rate-area > input:checked + label:hover,
.rate-area > input:checked + label:hover ~ label,
.rate-area > input:checked ~ label:hover,
.rate-area > input:checked ~ label:hover ~ label,
.rate-area > label:hover ~ input:checked ~ label {
    color: #e8262d;
    text-shadow: none;

.rate-area > label:active {
  • HTML
<ul class="rate-area">
                <input type="radio" id="5-star" name="crating" value="5">
<label for="5-star" title="Amazing">5 stars</label>
                <input type="radio" id="4-star" name="crating" value="4">
<label for="4-star" title="Good">4 stars</label>
                <input type="radio" id="3-star" name="crating" value="3">
<label for="3-star" title="Average">3 stars</label>
                <input type="radio" id="2-star" name="crating" value="2">
<label for="2-star" title="Not Good">2 stars</label>
                <input type="radio" id="1-star" required=""
 name="crating" value="1" aria-required="true">
<label for="1-star" title="Bad">1 star</label>

And, then Download The css DOWNLOAD

And Don’t Forget to Add the css in the header.

Leave a Reply

Your email address will not be published. Required fields are marked *