CSSで評価★星を作る

星をクリックして評価を送信する仕組み

HTML

<form type="get" action="">
  <div class="hyouka">
    <input id="hoshi1" type="radio" name="hoshi" value="5" />
    <label for="hoshi1">★</label>
    <input id="hoshi2" type="radio" name="hoshi" value="4" />
    <label for="hoshi2">★</label>
    <input id="hoshi3" type="radio" name="hoshi" value="3" />
    <label for="hoshi3">★</label>
    <input id="hoshi4" type="radio" name="hoshi" value="2" />
    <label for="hoshi4">★</label>
    <input id="hoshi5" type="radio" name="hoshi" value="1" />
    <label for="hoshi5">★</label>
  </div>
</form>

CSS

.hyouka{
 display: -ms-flex;
 display: -webkit-flex;
 display: -moz-flex;
 display: -o-flex;
 display: flex;

 flex-direction: -ms-row-reverse;
 flex-direction: -webkit-row-reverse;
 flex-direction: -moz-row-reverse;
 flex-direction: -o-row-reverse; 
 flex-direction: row-reverse;
 
justify-content: -ms-right;
justify-content: -webkit-right;
justify-content: -moz-right;
justify-content: -o-right;
justify-content: right;
}
.hyouka input[type='radio']{
  display: none;
}
.hyouka input[type='radio']{
  display: none;
}
.hyouka label{
  position: relative;
  padding: 10px 0px 20px 0px;
  color: #bbb;
  cursor: pointer;
  font-size: 30px;
}

.hyouka label:hover,
.hyouka label:hover ~ label,
.hyouka input[type='radio']:checked ~ label{
  color: #faee2e;
}

結果