我想创建一个评分星星,附带我的HTML脚本示例。
如果我的HTML脚本像这样:
但我想按照以下方式运行
就像下面的示例脚本一样,但CSS无法工作。
<input type="radio" name="rating" id="rating-5"><label for="rating-5" class="fas fa-star"></label>
,
则这个CSS脚本可以运行,但我想按照以下方式运行
<label for="rating-5" class="fas fa-star"> <input type="radio" name="rating" id="rating-5"> </label>
就像下面的示例脚本一样,但CSS无法工作。
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
}
.star-rating input {
display: none;
}
.star-rating {
margin: 50px auto;
display: table;
width: 350px;
}
.star-rating label {
padding: 10px;
float: right;
font-size: 44px;
color: #eee;
}
.star-rating input:not(:checked)~label:hover,
.star-rating input:not(:checked)~label:hover~label {
color: #ffc107;
}
.star-rating input:checked {
color: #ffc107;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" />
<div class="star-rating">
<div class="star-input">
<label for="rating-5" class="fas fa-star">
<input type="radio" name="rating" id="rating-5"></label>
<label for="rating-4" class="fas fa-star">
<input type="radio" name="rating" id="rating-4"></label>
<label for="rating-3" class="fas fa-star">
<input type="radio" name="rating" id="rating-3"></label>
<label for="rating-2" class="fas fa-star">
<input type="radio" name="rating" id="rating-2"></label>
<label for="rating-1" class="fas fa-star">
<input type="radio" name="rating" id="rating-1"></label>
</div>
</div>
请帮助我解决问题,谢谢。抱歉我的英语不太好。