1. TOP
  2. CSS
  3. CSSで評価★星を作る

CSSで評価★星を作る

目次

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

HTML

labelタグなのでsubmitするだけでデータを送信できます。
<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

ラジオボタンの仕組みをつかってdisplay: noneで消しているだけです。 flex-direction: row-reverse;で逆さにして利用しています。 逆さだと右と左も逆になってしまうのでjustify-content: right;で左にしてます。
.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;
}

結果


スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。