CodePen

HTML

            
              <fieldset class="score">
  <legend>Score:</legend>
  
  <input type="radio" id="score-5" name="score" value="5"/>
  <label title="5 stars" for="score-5">5 stars</label>
  
  <input type="radio" id="score-4" name="score" value="4"/>
  <label title="4 stars" for="score-4">4 stars</label>
  
  <input type="radio" id="score-3" name="score" value="3"/>
  <label title="3 stars" for="score-3">3 stars</label>
  
  <input type="radio" id="score-2" name="score" value="2"/>
  <label title="2 stars" for="score-2">2 stars</label>
  
  <input type="radio" id="score-1" name="score" value="1"/>
  <label title="1 stars" for="score-1">1 stars</label>
  
</fieldset>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  padding: 1em;
}

input {
  position:absolute;
  top: -2em;
  clip:rect(0,0,0,0);
}

.score {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  border: 0;
  font-size: 0;
}
.score legend {
  overflow: hidden;
  height: 0;
}
.score label {
  font-size: 32px; font-size: 2rem;
  line-height: 32px; line-height: 2rem;
  display: inline-block;
  position: relative;
  text-align: center;
  width: 1.2em;
  height: 1em;
  overflow: hidden;
  text-indent: 100%;
}
.score label:before {
   content: "☆";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   text-indent: 0;
   line-height: 1em;
   color: #aaa;
}
.score label:hover:before,
.score label:hover ~ label:before,
.score input:checked ~ label:before {
   content: "★";
   color: #ffbb04;
}
.score label:active {
  position: relative;
  top: 1px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................