I am facing an issue with a 5-star rating system (radio buttons) that is intended to be used in two separate questions.
The problem arises when the ratings for each question seem to be linked, causing a selection made in one question to affect the other. This issue only occurs when I include the CSS code; without it, everything functions correctly.
I suspect that there might be something wrong in the CSS styling. Here is the snippet of the CSS code:
.estrelas input[type=radio] {
display: none;
}
.estrelas label i.fa:before {
content: '\f005';
color: #FC0;
font-size: 40px;
}
.estrelas input[type=radio]:checked~label i.fa:before {
color: #CCC;
}
.estrelas {
margin-left: 10px;
margin-top: 10px;
}And here is how the HTML structure looks like:
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">ASPECTOS FORMAIS/GRAMATICAIS</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_1">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_1" value=1_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_1" value=1_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_1" value=1_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_1" value=1_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_1" value=1_5 />
</div>
</div>
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">CONTEÚDO/ARGUMENTAÇÃO</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_2">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_2" value=2_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_2" value=2_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_2" value=2_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_2" value=2_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_2" value=2_5 />
</div>
</div>