JSFiddle - React, Tailwind, and code Playground

CSS only star rating

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<div class="star-rating">
    <input name="myrating" id="rating1" type="radio" value="5" /><span></span>
    <input name="myrating" id="rating2" type="radio" value="4" /><span></span>
    <input name="myrating" id="rating3" type="radio" value="3" /><span></span>
    <input name="myrating" id="rating4" type="radio" value="2" /><span></span>
    <input name="myrating" id="rating4" type="radio" value="1" /><span></span>
</div>

CSS

/*
	Ratings Stars
	(with as little code as possible)
*/
.star-rating {
    direction: rtl;
    text-align: center;
    font-size: 0;
}
.star-rating > span {
    display: inline-block;
    position: relative;
    font-size: 36px;
    background-color: gold;
    width: 1em;
    height: 1em;
    -webkit-mask-image:...

JavaScript

FastClick.attach(document.body);