Looking to create a custom star rating system using CSS. I found inspiration from this link: https://codepen.io/andreacrawford/pen/NvqJXW
However, my DOM structure is different.
input {
display: none;
}
.radio-div label {
visibility: hidden;
}
.wrapper {
display: flex;
align-items: center;
}
.radio-div>label:before {
content: '★ ';
visibility: visible;
}
.radio-div>input:checked~label {
color: green;
}<div class="wrapper">
<div class="radio-div">
<input type="radio" name="rating" id="star_1">
<label for="star_1">1</label>
</div>
<div class="radio-div">
<input type="radio" name="rating" id="star_2">
<label for="star_2">2</label>
</div>
<div class="radio-div">
<input type="radio" name="rating" id="star_3">
<label for="star_3">3</label>
</div>
<div class="radio-div">
<input type="radio" name="rating" id="star_4">
<label for="star_4">4</label>
</div>
<div class="radio-div">
<input type="radio" name="rating" id="star_5">
<label for="star_5">5</label>
</div>
</div>Seeking assistance in implementing star rating functionality within this specific DOM structure. Any help would be appreciated.