Question

我找到了一个纯CSS星级评分系统但是使用给定的代码我每页只能使用一个星级系统。我已经尝试更改班级名称，但不幸的是，第二个星级评级表格会在按下时检查第一个星级评级表格。有没有办法解决这个问题？

.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: "\f005";
}

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

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

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* 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: #FFED85;  }

HTML

<form class="form-class" id="starform">               
   <fieldset class="rating">
         <input type="radio" id="star2" name="rating" value="2"/>
         <label class="full" for="star2" title="2 stars"></label>

         <input type="radio" id="star1" name="rating" value="1"/> 
         <label class="full" for="star1" title="1 star"></label>
   </fieldset>
</form>

<form class="form-class" id="starformtwo">               
       <fieldset class="ratingtwo">
             <input type="radio" id="star2-2" name="ratingtwo" value="2"/>
             <label class="full" for="star2-2" title="2 stars"></label>

             <input type="radio" id="star1-2" name="ratingtwo" value="1"/> 
             <label class="full" for="star1-2" title="1 star"></label>
       </fieldset>
    </form>

Answer 1

你的意思是这样吗？

.ratings { 
  border: none;
  float: left;
}

.ratings > input { display: none; } 
.ratings > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.ratings > .half:before { 
  content: "\f089";
  position: absolute;
}

.ratings > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.ratings > input:checked ~ label, /* show gold star when clicked */
.ratings:not(:checked) > label:hover, /* hover current star */
.ratings:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.ratings > input:checked + label:hover, /* hover current star when changing rating */
.ratings > input:checked ~ label:hover,
.ratings > label:hover ~ input:checked ~ label, /* lighten current selection */
.ratings > input:checked ~ label:hover ~ label { color: #FFED85;  }

.ratingtwo { 
  border: none;
  float: left;
}

.ratingtwo > input { display: none; } 
.ratingtwo > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.ratingtwo > .half:before { 
  content: "\f089";
  position: absolute;
}

.ratingtwo > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.ratingtwo > input:checked ~ label, /* show gold star when clicked */
.ratingtwo:not(:checked) > label:hover, /* hover current star */
.ratingtwo:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.ratingstwo > input:checked + label:hover, /* hover current star when changing rating */
.ratingstwo > input:checked ~ label:hover,
.ratingtwo > label:hover ~ input:checked ~ label, /* lighten current selection */
.ratingtwo > input:checked ~ label:hover ~ label { color: #FFED85;  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<form class="form-class" id="starform">               
   <fieldset class="ratings">
         <input type="radio" id="star2" name="rating" value="2"/>
         <label class="full" for="star2" title="2 stars"></label>

         <input type="radio" id="star1" name="rating" value="1"/> 
         <label class="full" for="star1" title="1 star"></label>
   </fieldset>
</form>

<form class="form-class" id="starformtwo">               
       <fieldset class="ratingtwo">
             <input type="radio" id="star2-2" name="ratingtwo" value="2"/>
             <label class="full" for="star2-2" title="2 stars"></label>

             <input type="radio" id="star1-2" name="ratingtwo" value="1"/> 
             <label class="full" for="star1-2" title="1 star"></label>
       </fieldset>
    </form>

或者你可以去jsfiddle：https://jsfiddle.net/rnpow2yz/

希望此代码有效。

如何确保一个无线电表格不会检查另一个无线电表格

1 个答案: