Tạo tiện ích đánh giá trực tiếp trên website

.star-rating{
  font-size:0;
  white-space:nowrap;
  display:inline-block;
  width:250px;
  height:50px;
  overflow:hidden;
  position:relative;
  background:
      url(<'url'>);
  background-size: contain;
  i{
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: 
        url('');  
    background-size: contain;
  }
  input{ 
    -moz-appearance:none;
    -webkit-appearance:none;
    opacity: 0;
    display:inline-block;
    width: 20%;
    height: 100%; 
    margin:0;
    padding:0;
    z-index: 2;
    position: relative;
    &:hover + i,
    &:checked + i{
      opacity:1;    
    }
  }
  i ~ i{
    width: 40%;
  }
  i ~ i ~ i{
    width: 60%;
  }
  i ~ i ~ i ~ i{
    width: 80%;
  }
  i ~ i ~ i ~ i ~ i{
    width: 100%;
  }
}

//JUST COSMETIC STUFF F-ROM HERE ON. THESE AREN'T THE DROIDS YOU ARE LOOKING FOR: MOVE ALONG. 

//just styling for the number
.choice{
  position: fixed;
  top: 0;
  left:0;
  right:0;
  text-align: center;
  padding: 20px;
  display:block;
}

//reset, center n shiz (don't mind this stuff)
*, ::after, ::before{
  height: 100%;
  padding:0;
  margin:0;
  box-sizing: border-box;
  text-align: center;  
  vertical-align: middle;
}
body{
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;
  &::before{
    height: 100%;
    content:'';
    width:0;
    background:red;
    vertical-align: middle;
    display:inline-block;
  }
}