您好,
我正在尝试构建一个 5 星评级表,我希望其中有 3 行 5 星评级。这是我拥有的:
.ratingLabel {
font-family: 'Montserrat Light',Helvetica,sans-serif;
padding: 8px 0;
float: left;
color: #A9A9A9;
}
.rating {
float: right;
}
.rating input {
display: none;
}
.rating label {
color: #ddd;
float: right;
}
.rating label:before {
margin: 5px;
font-size: 20px;
font-family: fontAwesome;
display: inline-block;
content: "\f005";
}
.rating .half:before {
content: "\f089";
position: absolute;
}
.rating > input:checked ~ label,.rating:not(:checked) > label:hover,.rating:not(:checked) > label:hover ~ label {
color: #FFD700;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Friendly advisor:</label>
<div class="rating">
<input id="star5" name="rating" type="radio" value="5"/>
<label for="star5" class="full"></label>
<input id="star4.5" name="rating" type="radio" value="4.5"/>
<label for="star4.5" class="half"></label>
<input id="star3" name="rating" type="radio" value="3"/>
<label for="star3" class="full"></label>
<input id="star3.5" name="rating" type="radio" value="3.5"/>
<label for="star3.5" class="half"></label>
<input id="star2" name="rating" type="radio" value="2"/>
<label for="star2" class="full"></label>
<input id="star2.5" name="rating" type="radio" value="2.5"/>
<label for="star2.5" class="half"></label>
<input id="star1" name="rating" type="radio" value="1"/>
<label for="star1" class="full"></label>
<input id="star1.5" name="rating" type="radio" value="1.5"/>
<label for="star1.5" class="half"></label>
<input id="star0" name="rating" type="radio" value="0"/>
<label for="star0" class="full"></label>
<input id="star0.5" name="rating" type="radio" value="0.5"/>
<label for="star0.5" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Call line quality:</label>
<div class="rating">
<input id="star5" name="rating" type="radio" value="5"/>
<label for="star5" class="full"></label>
<input id="star4.5" name="rating" type="radio" value="4.5"/>
<label for="star4.5" class="half"></label>
<input id="star3" name="rating" type="radio" value="3"/>
<label for="star3" class="full"></label>
<input id="star3.5" name="rating" type="radio" value="3.5"/>
<label for="star3.5" class="half"></label>
<input id="star2" name="rating" type="radio" value="2"/>
<label for="star2" class="full"></label>
<input id="star2.5" name="rating" type="radio" value="2.5"/>
<label for="star2.5" class="half"></label>
<input id="star1" name="rating" type="radio" value="1"/>
<label for="star1" class="full"></label>
<input id="star1.5" name="rating" type="radio" value="1.5"/>
<label for="star1.5" class="half"></label>
<input id="star0" name="rating" type="radio" value="0"/>
<label for="star0" class="full"></label>
<input id="star0.5" name="rating" type="radio" value="0.5"/>
<label for="star0.5" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Overall satisfaction:</label>
<div class="rating">
<input id="star5" name="rating" type="radio" value="5"/>
<label for="star5" class="full"></label>
<input id="star4.5" name="rating" type="radio" value="4.5"/>
<label for="star4.5" class="half"></label>
<input id="star3" name="rating" type="radio" value="3"/>
<label for="star3" class="full"></label>
<input id="star3.5" name="rating" type="radio" value="3.5"/>
<label for="star3.5" class="half"></label>
<input id="star2" name="rating" type="radio" value="2"/>
<label for="star2" class="full"></label>
<input id="star2.5" name="rating" type="radio" value="2.5"/>
<label for="star2.5" class="half"></label>
<input id="star1" name="rating" type="radio" value="1"/>
<label for="star1" class="full"></label>
<input id="star1.5" name="rating" type="radio" value="1.5"/>
<label for="star1.5" class="half"></label>
<input id="star0" name="rating" type="radio" value="0"/>
<label for="star0" class="full"></label>
<input id="star0.5" name="rating" type="radio" value="0.5"/>
<label for="star0.5" class="half"></label>
</div>
</div>
从下面的 link可以看到live ,选择根本不起作用。尝试以不同方式命名 3 行并为它们提供不同的 ID,但仍然无效。
最佳答案
大家好,
感谢https://stackoverflow.com/questions/30991572/... ,我已经设法修复它。我提供的问题和答案的链接可以被认为是这些案例的通用解决方案。以下是我对 HTML 应用的更改:
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Friendly advisor:</label>
<div class="rating">
<input id="star_a-5" name="rating_a" type="radio" value="5"/>
<label for="star_a-5" class="full"></label>
<input id="star_a-45" name="rating_a" type="radio" value="4.5"/>
<label for="star_a-45" class="half"></label>
<input id="star_a-3" name="rating_a" type="radio" value="3"/>
<label for="star_a-3" class="full"></label>
<input id="star_a-35" name="rating_a" type="radio" value="3.5"/>
<label for="star_a-35" class="half"></label>
<input id="star_a-2" name="rating_a" type="radio" value="2"/>
<label for="star_a-2" class="full"></label>
<input id="star_a-25" name="rating_a" type="radio" value="2.5"/>
<label for="star_a-25" class="half"></label>
<input id="star_a-1" name="rating_a" type="radio" value="1"/>
<label for="star_a-1" class="full"></label>
<input id="star_a-15" name="rating_a" type="radio" value="1.5"/>
<label for="star_a-15" class="half"></label>
<input id="star_a-0" name="rating_a" type="radio" value="0"/>
<label for="star_a-0" class="full"></label>
<input id="star_a-05" name="rating_a" type="radio" value="0.5"/>
<label for="star_a-05" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Call line quality:</label>
<div class="rating">
<input id="star_b-5" name="rating_b" type="radio" value="5"/>
<label for="star_b-5" class="full"></label>
<input id="star_b-45" name="rating_b" type="radio" value="4.5"/>
<label for="star_b-45" class="half"></label>
<input id="star_b-3" name="rating_b" type="radio" value="3"/>
<label for="star_b-3" class="full"></label>
<input id="star_b-35" name="rating_b" type="radio" value="3.5"/>
<label for="star_b-35" class="half"></label>
<input id="star_b-2" name="rating_b" type="radio" value="2"/>
<label for="star_b-2" class="full"></label>
<input id="star_b-25" name="rating_b" type="radio" value="2.5"/>
<label for="star_b-25" class="half"></label>
<input id="star_b-1" name="rating_b" type="radio" value="1"/>
<label for="star_b-1" class="full"></label>
<input id="star_b-15" name="rating_b" type="radio" value="1.5"/>
<label for="star_b-15" class="half"></label>
<input id="star_b-0" name="rating_b" type="radio" value="0"/>
<label for="star_b-0" class="full"></label>
<input id="star_b-05" name="rating_b" type="radio" value="0.5"/>
<label for="star_b-05" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Overall satisfaction:</label>
<div class="rating">
<input id="star_c-5" name="rating_c" type="radio" value="5"/>
<label for="star_c-5" class="full"></label>
<input id="star_c-45" name="rating_c" type="radio" value="4.5"/>
<label for="star_c-45" class="half"></label>
<input id="star_c-3" name="rating_c" type="radio" value="3"/>
<label for="star_c-3" class="full"></label>
<input id="star_c-35" name="rating_c" type="radio" value="3.5"/>
<label for="star_c-35" class="half"></label>
<input id="star_c-2" name="rating_c" type="radio" value="2"/>
<label for="star_c-2" class="full"></label>
<input id="star_c-25" name="rating_c" type="radio" value="2.5"/>
<label for="star_c-25" class="half"></label>
<input id="star_c-1" name="rating_c" type="radio" value="1"/>
<label for="star_c-1" class="full"></label>
<input id="star_c-15" name="rating_c" type="radio" value="1.5"/>
<label for="star_c-15" class="half"></label>
<input id="star_c-0" name="rating_c" type="radio" value="0"/>
<label for="star_c-0" class="full"></label>
<input id="star_c-05" name="rating_c" type="radio" value="0.5"/>
<label for="star_c-05" class="half"></label>
</div>
</div>
关于html - 多个 5 星评论行 HTML CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35881650/