У меня есть следующая проблема, например, css. Не работает, когда добавлено более одного набора полей.
fieldset.star {
box-sizing:border-box;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
position:relative;
margin: 10px auto 10px auto;
}
fieldset.star.star5 > label:nth-of-type(even){
display:none;
}
fieldset.star > input[type="radio"] {
display: none;
}
fieldset.star > label {
display:inline-block;
float:right;
color:rgba(255,255,255,.5);
}
fieldset.star > label:before {
display: inline-block;
font-size: 4rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: FontAwesome;
content: "\f005 "; /* full star */
}
fieldset.star .half{
color:rgba(255,255,255,.1);
}
fieldset.star .half:before {
content: "\f089 "; /* half star no outline */
position: absolute;
padding-right: 0;
}
/* Click + hover color */
fieldset.star > input:checked ~ label, /* color current and previous stars on checked */
fieldset.star > label:hover,
fieldset.star > label:hover ~ label {
color: #DDBB00;
} /* color previous stars on hover */
/* Hover highlights */
fieldset.star > input:checked + label:hover,
fieldset.star > input:checked ~ label:hover, /* highlight current and previous stars */
fieldset.star > input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
fieldset.star > label:hover ~ input:checked ~ label /* highlight previous selected stars */ {
color: #FFD700;
}
<fieldset class="star">
<input type="radio" id="rating10" name="answer" value="10"><label for="rating10"></label>
<input type="radio" id="rating9" name="answer" value="9"><label class="half" for="rating9"></label>
<input type="radio" id="rating8" name="answer" value="8"><label for="rating8"></label>
<input type="radio" id="rating7" name="answer" value="7"><label class="half" for="rating7"></label>
<input type="radio" id="rating6" name="answer" value="6"><label for="rating6"></label>
<input type="radio" id="rating5" name="answer" value="5"><label class="half" for="rating5"></label>
<input type="radio" id="rating4" name="answer" value="4"><label for="rating4"></label>
<input type="radio" id="rating3" name="answer" value="3"><label class="half" for="rating3"></label>
<input type="radio" id="rating2" name="answer" value="2"><label for="rating2"></label>
<input type="radio" id="rating1" name="answer" value="1"><label class="half" for="rating1"></label>
</fieldset>
<fieldset class="star">
<input type="radio" id="rating110" name="answer" value="10"><label for="rating110"></label>
<input type="radio" id="rating19" name="answer" value="9"><label class="half" for="rating19"></label>
<input type="radio" id="rating18" name="answer" value="8"><label for="rating18"></label>
<input type="radio" id="rating17" name="answer" value="7"><label class="half" for="rating17"></label>
<input type="radio" id="rating16" name="answer" value="6"><label for="rating16"></label>
<input type="radio" id="rating15" name="answer" value="5"><label class="half" for="rating15"></label>
<input type="radio" id="rating14" name="answer" value="4"><label for="rating14"></label>
<input type="radio" id="rating13" name="answer" value="3"><label class="half" for="rating13"></label>
<input type="radio" id="rating12" name="answer" value="2"><label for="rating12"></label>
<input type="radio" id="rating11" name="answer" value="1"><label class="half" for="rating11"></label>
</fieldset>
В сочетании с этим CSS, он прекрасно работает, но не тогда, когда есть больше одинаковых элементов [fieldset]. Я не могу найти правильный ответ для этого, но я хочу, чтобы это сработало правильно. Я знаю, что могу использовать для этого javascript / jquery [плагины], но я хочу использовать это решение css, если это возможно
У кого-нибудь есть мысли?