html 纯CSS星级

Posted 2021-05-11

.star-rating { 
  font-family: 'FontAwesome';
  margin: 10px auto;
      
  > fieldset {
    border: none;
    display: inline-block;
    
    &:not(:checked) {
      > input {
        position: absolute;
        top: -9999px;
        clip: rect(0,0,0,0);
      }

      > label {
        float: right;
        width: 1em;
        padding: 0 .05em;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 200%;
        color: #ccc;
        
        &:before {
          content: '\f006  ';
        }
        
        &:hover,
        &:hover ~ label {
          color: orange;
          text-shadow: 0 0 3px orange;
          &:before {
            content: '\f005  ';
          }
        }
      }
    }
    
    > input:checked {
      & ~ label {
        &:before {
          content: '\f005  ';
          color: orange;
        }
      }    
    }    

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

<div class="star-rating">
  <fieldset>
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Outstanding">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Very Good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Good">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Poor">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Very Poor">1 star</label>
  </fieldset>
</div>