CSS Sterne-Bewertungssystem verschwindet auf Auswahl

Question

Kann jemand bitte erklären, warum diese css Sternbewertung verschwindet, wenn ich auf eine der beiden höchsten Bewertungen klicke? Ich verwende Chrome und habe den Code von hier: 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>

Answer 1

Ihr Stil margin-right: -100%; ist Dinge, Messing und wenn Sie auf den letzten 2 Klicken Sie nicht wirklich klicken auf, was Sie denken, Sie sind.

Um dies zu beheben, entfernen Sie einfach diesen Stil und geben Sie dem input einen Stil von position: absolute;, so dass sie keinen Platz im DOM einnehmen.

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

See here for a demo