Breaking News: Grepper is joining You.com. Read the official announcement!

review star css

Mysterious Macaque answered on August 13, 2022 Popularity 9/10 Helpfulness 3/10

answer review star css

review star css

Comment

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

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

Popularity 9/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: codepen css html rating review

Link to this answer
Share Copy Link

Contributed on Aug 13 2022

Mysterious Macaque

0 Answers Avg Quality 2/10

review star css

Contents

More Related Answers

review star css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.