如何使用 CSS 进行 5 星级评级

问题描述 投票：0回答：2

我编辑了 CSS 5 星级评级的一个版本，并且需要在我的一页上多个这些评级。但是，当我更改不同 5 颗星集上的 id 时，现在它不会处理检查星星。

我尝试拥有多组 5 颗星，并编辑了 ID 来执行此操作，希望它能够工作，但在检查时星星不会收到检查值。

fieldset,
label {
  margin: 0;
  padding: 0;
}

body {
  margin: 20px;
}

h1 {
  font-size: 1.5em;
  margin: 10px;
}

.rating {
  border: none;
  float: left;
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "★";
}

.rating>.half:before {
  content: "★";
  position: absolute;
}

.rating>label {
  color: #ddd;
  float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
  color: #ff0000;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
  color: #ff8080;
}
<fieldset class="rating">
  <input type="radio" id="1star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
  <input type="radio" id="1star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
  <input type="radio" id="1star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
  <input type="radio" id="1star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
  <input type="radio" id="1star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
  <input type="radio" id="1star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
  <input type="radio" id="1star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
  <input type="radio" id="1star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
  <input type="radio" id="1star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
  <input type="radio" id="1starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>

  <fieldset class="rating">
    <input type="radio" id="2star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="2star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="2star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="2star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="2star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="2star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="2star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="2star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="2star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="2starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>

html css input label pure-css
2个回答
0
投票

您遇到的问题是 HTML。 输入具有唯一的 ID，但每个标签的 

for
属性必须与其引用的 ID 相同（参见 MDN）。
像这样：

fieldset,
label {
  margin: 0;
  padding: 0;
}

body {
  margin: 20px;
}

h1 {
  font-size: 1.5em;
  margin: 10px;
}

.rating {
  border: none;
  float: left;
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "★";
}

.rating>.half:before {
  content: "★";
  position: absolute;
}

.rating>label {
  color: #ddd;
  float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
  color: #ff0000;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
  color: #ff8080;
}
<fieldset class="rating">
  <input type="radio" id="1star5" name="rating" value="5" />
  <label class="full" for="1star5" title="Awesome - 5 stars"></label>
  <input type="radio" id="1star4half" name="rating" value="4 and a half" />
  <label class="half" for="1star4half" title="Pretty good - 4.5 stars"></label>
  <input type="radio" id="1star4" name="rating" value="4" />
  <label class="full" for="1star4" title="Pretty good - 4 stars"></label>
  <input type="radio" id="1star3half" name="rating" value="3 and a half" />
  <label class="half" for="1star3half" title="Meh - 3.5 stars"></label>
  <input type="radio" id="1star3" name="rating" value="3" />
  <label class="full" for="1star3" title="Meh - 3 stars"></label>
  <input type="radio" id="1star2half" name="rating" value="2 and a half" />
  <label class="half" for="1star2half" title="Kinda bad - 2.5 stars"></label>
  <input type="radio" id="1star2" name="rating" value="2" />
  <label class="full" for="1star2" title="Kinda bad - 2 stars"></label>
  <input type="radio" id="1star1half" name="rating" value="1 and a half" />
  <label class="half" for="1star1half" title="Meh - 1.5 stars"></label>
  <input type="radio" id="1star1" name="rating" value="1" />
  <label class="full" for="1star1" title="Sucks big time - 1 star"></label>
  <input type="radio" id="1starhalf" name="rating" value="half" />
  <label class="half" for="1starhalf" title="Sucks big time - 0.5 stars"></label>
  </fieldset>

  <fieldset class="rating">
    <input type="radio" id="2star5" name="rating" value="5" />
    <label class="full" for="2star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="2star4half" name="rating" value="4 and a half" />
    <label class="half" for="2star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="2star4" name="rating" value="4" />
    <label class="full" for="2star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="2star3half" name="rating" value="3 and a half" />
    <label class="half" for="2star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="2star3" name="rating" value="3" />
    <label class="full" for="2star3" title="Meh - 3 stars"></label>
    <input type="radio" id="2star2half" name="rating" value="2 and a half" />
    <label class="half" for="2star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="2star2" name="rating" value="2" />
    <label class="full" for="2star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="2star1half" name="rating" value="1 and a half" />
    <label class="half" for="2star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="2star1" name="rating" value="1" />
    <label class="full" for="2star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="2starhalf" name="rating" value="half" />
    <label class="half" for="2starhalf" title="Sucks big time - 0.5 stars"></label>
    </fieldset>

0
投票

代码不完整，HTML 和 CSS 中缺少某些元素，无法清楚地看到代码。 谢谢你

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.