html - 将选项列表转换为星星

Question

我正在使用这部分代码来评价我从 MySQL 形成的一些文章。评分是我的选项列表，有人可以用数字 1、2、3 给他们评分。有可能以某种方式将此列表转换为 3 星(带有单选按钮、图像或其他东西)？

<form id="ratethis-<?=$PK?>" action="rate.php?idP=<?=$idPK?>"method="post">
 <select name="rating">

 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select> <br> 
 <input type="submit" value="Rate this!"/><br><br>
 </form>

Answer 1

在 html 上:

<ul class="rating">
<span class="strong"><strong><li class="one"><a href="#">1 Star</a></li></strong></span>
<span class="strong"><strong><li class="two"><a href="#">2 Stars</a></li></strong></span>
<span class="strong"><strong><li class="three"><a href="#">3 Stars</a></li></strong></span>
<span class="strong"><strong><li class="four"><a href="#">4 Stars</a></li></strong></span>
<span class="strong"><strong><li class="five"><a href="#">5 Stars</a></li></strong></span>
</ul>

在 CSS 上:

.rating {

margin: 0;

padding: 0;

list-style: none;

clear: both;

width: 75px;

height: 15px;

background-image: url(stars.gif);

background-repeat: no-repeat;

position: relative;

}

.rating li {

text-indent: −9999em;

float: left; /* for IE6 */

}

.rating li a {

position: absolute;

top: 0;

left: 0;

z-index: 20;

height: 15px;

width: 15px;

display: block;

}

.rating .one a {

left: 0;

}

.rating .two a {

left: 15px;

}

.rating .three a {

left: 30px;

}

.rating .four a {

left: 45px;

}

.rating .five a {

left: 60px;

}

也许这个链接会有帮助:

How to create a star ranking system using css