星级单选按钮css

Question

在这里：http : //jsfiddle.net/ghvNn/261/我创建了两星级。来自此网页http://rog.ie/blog/css-star-rater。但是此代码仅适用于5星，但我想将其设置为（3,5,7,10）星。我该怎么做？

<span class="star-rating">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>
<br><br>
<span class="star-rating">      
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
</span>

Answer 1

添加额外的类以span.star-rating分离具有不同数量的星型。例如：

<span class="star-rating star-5">

然后删除此样式：

.star-rating {width: 250px;}
.star-rating i {width: 20%;}
.star-rating input {width: 20%;}

最后，您可以添加以下样式：

.star-rating.star-5 {width: 250px;}
.star-rating.star-5 input,
.star-rating.star-5 i {width: 20%;}
.star-rating.star-5 i ~ i {width: 40%;}
.star-rating.star-5 i ~ i ~ i {width: 60%;}
.star-rating.star-5 i ~ i ~ i ~ i {width: 80%;}
.star-rating.star-5 i ~ i ~ i ~ i ~i {width: 100%;}

.star-rating.star-3 {width: 150px;}
.star-rating.star-3 input,
.star-rating.star-3 i {width: 33.33%;}
.star-rating.star-3 i ~ i {width: 66.66%;}
.star-rating.star-3 i ~ i ~ i {width: 100%;}

演示： JSFiddle