title: CSS star-rating system disappears on selection
body: <p>Can someone please explain why this css star rating <strong>disappears</strong> when I click either of two highest ratings? I'm using Chrome and got the code from here: <a href="http://code.stephenmorley.org/html-and-css/star-rating-widget/" rel="nofollow noreferrer">http://code.stephenmorley.org/html-and-css/star-rating-widget/</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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)&gt;input {
    margin-right: -100%;
    opacity: 0;
  }
  
  .starRating:not(old)&gt;label {
    display: block;
    float: right;
    position: relative;
    background: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'&gt;&lt;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'/&gt;&lt;/svg&gt;");
    background-size: contain;
  }
  
  .starRating:not(old)&gt;label:before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'&gt;&lt;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'/&gt;&lt;/svg&gt;");
    background-size: contain;
    opacity: 0;
    transition: opacity 0.2s linear;
  }
  
  .starRating:not(old)&gt;label:hover:before,
  .starRating:not(old)&gt;label:hover~label:before,
  .starRating:not(:hover)&gt; :checked~label:before {
    opacity: 1;
  }
  
  .ratingdiv {
    width: 100%;
    text-align: center;
    background-color: #DCDFE6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ratingdiv"&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;span class="starRating"&gt;
            &lt;input id="rating5" type="radio" name="&lt;?php echo $name; ?&gt;" value="5"&gt;
            &lt;label for="rating5" title="outstanding!"&gt;5&lt;/label&gt;
            &lt;input id="rating4" type="radio" name="&lt;?php echo $name; ?&gt;" value="4"&gt;
            &lt;label for="rating4" title="good!"&gt;4&lt;/label&gt;
            &lt;input id="rating3" type="radio" name="&lt;?php echo $name; ?&gt;" value="3"&gt;
            &lt;label for="rating3" title="ok"&gt;3&lt;/label&gt;
            &lt;input id="rating2" type="radio" name="&lt;?php echo $name; ?&gt;" value="2"&gt;
            &lt;label for="rating2" title="meh"&gt;2&lt;/label&gt;
            &lt;input id="rating1" type="radio" name="&lt;?php echo $name; ?&gt;" value="1"&gt;
            &lt;label for="rating1" title="yuck!"&gt;1&lt;/label&gt;
          &lt;/span&gt;&lt;br /&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>