我正在使用这部分代码来评价我从 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>
最佳答案
在 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;
}
也许这个链接会有帮助:
关于html - 将选项列表转换为星星，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21308737/