多个 5 星评论行 HTML CSS

Question

您好，
我正在尝试建立一个 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，但仍然无效。

Answer 1

大家好，
感谢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>