1
Hello, I have the following code:
html
<head>
<link rel="stylesheet" href="./teste.css">
<script src="https://use.fontawesome.com/7a5258e51f.js"></script>
</head>
<body>
<div class="estrelas">
<input type="radio" id="cm_star-empty" name="fb" value="" disabled />
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="fb" value="1" disabled />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="fb" value="2" checked disabled />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="fb" value="3" disabled />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="fb" value="4" disabled />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="fb" value="5" disabled />
</div>
<div class="estrelas">
<input type="radio" id="cm_star-empty" name="fb" value="" disabled />
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="fb" value="1" checked disabled />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="fb" value="2" disabled />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="fb" value="3" disabled />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="fb" value="4" disabled />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="fb" value="5" disabled />
</div>
</body>
css
.estrelas input[type="radio"] {
display: none;
}
.estrelas label i.fa {
font-size: 0.7rem;
}
.estrelas label i.fa:before {
content: "\f005"; /* F089*/
color: #fc0;
}
.estrelas input[type="radio"]:checked ~ label i.fa:before {
color: #ccc;
}
This code generates a "rating", with the stars from 1 to 5. The problem is that when I put more than one component (the "stars" class), it applies in the second as if it were 5 stars. What I searched for is that "the :before does not support several contents simultaneously".
By code, what I would like is that in the first only 2 stars are being displayed, and in the second one a star. How could I fix this using only HTML/CSS/JS?