There is a problem with the radio buttons' background color not displaying correctly after being checked and for the unselected options. Here is the CSS code snippet:
/*main rating class*/
.rating {
position: inherit;
display: inline-flex;
width: 100%;
box-sizing: border-box;
border: 1px solid #000;
background: linear-gradient( to left, #f00, #ff0, #0f0);
}
.rating input {
display: none;
}
.rating label {
position: inherit;
margin: inherit;
display: flex;
cursor: pointer;
width: 100%;
justify-content: center;
align-items: center;
transition: 0.5s;
background: #fff;
color: #000;
border-right: 1px solid #000;
}
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
background: transparent;
cursor: pointer;
}
.rating>input:checked+label:hover,
.rating>label:hover~input:checked~label,
.rating>input:checked~label:hover~label {
background: transparent;
cursor: pointer;
}<div>
<label for="rdbRating1">*1. XYZ </label>
<!-- 1st Radio button list -->
<div class="rating" id="rdbRating1">
<input type="radio" value="7" id="7">
<label for="7">7</label>
<input type="radio" value="6" id="6">
<label for="6">6</label>
<input type="radio" value="5" id="5">
<label for="5">5</label>
<input type="radio" value="4" id="4">
<label for="4">4</label>
<input type="radio" value="3" id="3">
<label for="3">3</label>
<input type="radio" value="2" id="2">
<label for="2">2</label>
<input type="radio" value="1" id="1">
<label for="1">1</label>
<input type="radio" value="NA" id="NA">
<label for="NA">NA</label>
</div>
</div>