Как создать список рейтинговых сообщений по радио-кнопке?

Question

Я создал список уроков. Рядом с каждым уроком десять звезд, чтобы оценить этот урок. Все хорошо, но кажется, что css не прав. Например, когда я нажимаю на звезды, чтобы оценить урок в третьей строке, css будет зависать в первой строке.

Я создаю рейтинг списка с помощью переключателя, подобного этому. Мой взгляд

<tbody>
@foreach($rates as $rate)
   <form method="post" action="{{url('/rating')}}">
      <input type="hidden" name="rateId" value="{{$rate->id}}">
      {{ csrf_field() }}
         <tr style="display: flex;">
              <td style="width:100px;"></td>
              <td style="text-align: left; width:400px;"><a href="{{url('/bai-giang/'.$rate->id)}}">{{$rate->title}}</a></td>
              <td style="text-align: center; width:200px;"></td>
              <td style="width:300px;">
                 <div align="center" style="display: inline-flex;">
                     <fieldset class="rating">
                        <input type="radio" id="star10" name="rating" value="10" /><label for="star10" title="Rocks!">10 stars</label>
                        <input type="radio" id="star9" name="rating" value="9" /><label for="star9" title="Rocks!">9 stars</label>
                        <input type="radio" id="star8" name="rating" value="8" /><label for="star8" title="Rocks!">8 stars</label>
                        <input type="radio" id="star7" name="rating" value="7" /><label for="star7" title="Rocks!">7 stars</label>
                        <input type="radio" id="star6" name="rating" value="6" /><label for="star6" title="Rocks!">6 stars</label>
                        <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
                        <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Rocks!">4 stars</label>
                        <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Rocks!">3 stars</label>
                        <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Rocks!">2 stars</label>
                        <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Rocks!">1 stars</label>
                   </fieldset>
                 </div>
              </td>
              <th style="width:100px;">
                  <button type="submit" class="btn btn-link" onclick="return confirmAction()"> Đánh giá</button>
               </th> 
          </tr>
  </form>
@endforeach
</tbody>

CSS для радиокнопки

    .rating {
        float:left;
    }

    .rating:not(:checked) > input {
            position: absolute;
            /* top: -9999px; */
            clip: rect(0, 0, 0, 0);
            height: 0;
            width: 0;
            overflow: hidden;
            opacity: 0;
    }

    .rating:not(:checked) > label {
        float:right;
        width:1em;
        padding:0 .1em;
        overflow:hidden;
        white-space:nowrap;
        cursor:pointer;
        font-size:200%;
        line-height:1.2;
        color:#ddd;
        text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
    }

    .rating:not(:checked) > label:before {
        content: '★ ';
    }

    .rating > input:checked ~ label {
        color: #f70;
        text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
    }

    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: gold;
        text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }

    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
        color: #ea0;
        text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }

    .rating > label:active {
        position:relative;
        top:2px;
        left:2px;
    }

мой результат: когда я нажимаю на звезду в третьей строке, она зависает в первой строке, как это

Answer 1

Чистое решение CSS может помочь вам

HTML

    <tbody>
@foreach($rates as $rate)
   <form method="post" action="{{url('/rating')}}">
      <input type="hidden" name="rateId" value="{{$rate->id}}">
      {{ csrf_field() }}
         <tr style="display: flex;">
              <td style="width:100px;"></td>
              <td style="text-align: left; width:400px;"><a href="{{url('/bai-giang/'.$rate->id)}}">{{$rate->title}}</a></td>
              <td style="text-align: center; width:200px;"></td>
              <td style="width:300px;">
                 <div align="center" style="display: inline-flex;">
                     <fieldset class="rating">
                        <input type="radio" id="star10" name="rating" value="10" /><label for="star10" title="Rocks!">10 stars</label>
                        <input type="radio" id="star9" name="rating" value="9" /><label for="star9" title="Rocks!">9 stars</label>
                        <input type="radio" id="star8" name="rating" value="8" /><label for="star8" title="Rocks!">8 stars</label>
                        <input type="radio" id="star7" name="rating" value="7" /><label for="star7" title="Rocks!">7 stars</label>
                        <input type="radio" id="star6" name="rating" value="6" /><label for="star6" title="Rocks!">6 stars</label>
                        <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
                        <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Rocks!">4 stars</label>
                        <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Rocks!">3 stars</label>
                        <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Rocks!">2 stars</label>
                        <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Rocks!">1 stars</label>
                   </fieldset>
                 </div>
              </td>
              <th style="width:100px;">
                  <button type="submit" class="btn btn-link" onclick="return confirmAction()"> Đánh giá</button>
               </th> 
          </tr>
     <tr style="display: flex;">
              <td style="width:100px;"></td>
              <td style="text-align: left; width:400px;"><a href="{{url('/bai-giang/'.$rate->id)}}">{{$rate->title}}</a></td>
              <td style="text-align: center; width:200px;"></td>
              <td style="width:300px;">
                 <div align="center" style="display: inline-flex;">
                     <fieldset class="rating">
                        <input type="radio" id="star101" name="rating1" value="10" /><label for="star101" title="Rocks!">10 stars</label>
                        <input type="radio" id="star91" name="rating1" value="9" /><label for="star91" title="Rocks!">9 stars</label>
                        <input type="radio" id="star81" name="rating1" value="8" /><label for="star81" title="Rocks!">8 stars</label>
                        <input type="radio" id="star71" name="rating1" value="7" /><label for="star71" title="Rocks!">7 stars</label>
                        <input type="radio" id="star61" name="rating1" value="6" /><label for="star61" title="Rocks!">6 stars</label>
                        <input type="radio" id="star51" name="rating1" value="5" /><label for="star51" title="Rocks!">5 stars</label>
                        <input type="radio" id="star41" name="rating1" value="4" /><label for="star41" title="Rocks!">4 stars</label>
                        <input type="radio" id="star31" name="rating1" value="3" /><label for="star31" title="Rocks!">3 stars</label>
                        <input type="radio" id="star21" name="rating1" value="2" /><label for="star21" title="Rocks!">2 stars</label>
                        <input type="radio" id="star11" name="rating1" value="1" /><label for="star11" title="Rocks!">1 stars</label>
                   </fieldset>
                 </div>
              </td>
              <th style="width:100px;">
                  <button type="submit" class="btn btn-link" onclick="return confirmAction()"> Đánh giá</button>
               </th> 
          </tr>
  </form>
@endforeach
</tbody>

CSS

.rating {
    float:left;
}

.rating:not(:checked) > input {
        position: absolute;
        /* top: -9999px; */
        clip: rect(0, 0, 0, 0);
        height: 0;
        width: 0;
        overflow: hidden;
        opacity: 0;
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}