Система рейтинга CSS исчезает при выборе

Может кто-нибудь объяснить, почему этот звездный рейтинг css исчезает, когда я нажимаю на любой из двух самых высоких рейтингов? Я использую Chrome и получил код отсюда: http://code.stephenmorley.org/html-and-css/star-rating-widget/.

/*code from http://code.stephenmorley.org/html-and-css/star-rating-widget/*/

.starRating:not(old) {
  display: inline-block;
  width: 7.5em;
  height: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
}

.starRating:not(old)>input {
  margin-right: -100%;
  opacity: 0;
}

.starRating:not(old)>label {
  display: block;
  float: right;
  position: relative;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='#fff' stroke='#ccc' d='M 12,2.5 14.4,9.5 21.5,9.5 15.8,13.75 18.5,21.5 12,16.625 5.5,21.5 8.2,13.75 2.5,9.5 9.6,9.5 z'/></svg>");
  background-size: contain;
}

.starRating:not(old)>label:before {
  content: '';
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='#9c3' stroke='#682' d='M 12,2.5 14.4,9.5 21.5,9.5 15.8,13.75 18.5,21.5 12,16.625 5.5,21.5 8.2,13.75 2.5,9.5 9.6,9.5 z'/></svg>");
  background-size: contain;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.starRating:not(old)>label:hover:before,
.starRating:not(old)>label:hover~label:before,
.starRating:not(:hover)> :checked~label:before {
  opacity: 1;
}

.ratingdiv {
  width: 100%;
  text-align: center;
  background-color: #DCDFE6;
}
<div class="ratingdiv"><br /><br />
  <span class="starRating">
          <input id="rating5" type="radio" name="<?php echo $name; ?>" value="5">
          <label for="rating5" title="outstanding!">5</label>
          <input id="rating4" type="radio" name="<?php echo $name; ?>" value="4">
          <label for="rating4" title="good!">4</label>
          <input id="rating3" type="radio" name="<?php echo $name; ?>" value="3">
          <label for="rating3" title="ok">3</label>
          <input id="rating2" type="radio" name="<?php echo $name; ?>" value="2">
          <label for="rating2" title="meh">2</label>
          <input id="rating1" type="radio" name="<?php echo $name; ?>" value="1">
          <label for="rating1" title="yuck!">1</label>
        </span><br /></div>


css rating-system
person user6096790    schedule 22.11.2017    source источник
comment
Примечание: <br> не использует и не требует закрывающей косой черты и никогда не использовал.   -  person Rob    schedule 23.11.2017

Ответы (1)


arrow_upward
2
arrow_downward

Ваш стиль margin-right: -100%; все портит, и когда вы нажимаете на последние 2, вы на самом деле не нажимаете на то, что вы думаете.

Чтобы исправить это, просто удалите этот стиль, а затем присвойте input стиль position: absolute;, чтобы они не занимали место в DOM.

    .starRating:not(old) > input{
         /*margin-right: -100%; Remove This*/
          position: absolute; /*Add this*/
          opacity      : 0;
      }

см. демонстрацию здесь

person zgood    schedule 22.11.2017