CSS以防止星级评分由多个星级评分重置 [英] CSS to prevent star rating from resetting with multiple star ratings

查看：110
本文介绍了CSS以防止星级评分由多个星级评分重置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要能够选择多个星级评分，而无需重置之前的评分。在下面的链接中，如果您评价'价格'，然后要评价'评估'，它将重置'价格'。

I would like to be able to select multiple star ratings without resetting the previous one. In the link below, if you rate the 'Price' and then want to rate the 'Valuation', it resets the 'Price'.

我向添加了和两个 c $ c> fieldset 元素的类，并在CSS中针对它，但没有找到一种方式使它与我的代码工作。感谢您的帮助。

I added one and two to the fieldset element's class and targeted it in the CSS, but haven't found a way to make it work with the code I have. Thanks for the help.

这是我的代码
http://jsfiddle.net/snewcomer24/zexvtoz1/ 

.rating {
  float:left;
}

.rating:not(:checked) > input {
  position:absolute;
  top:-9999px;
  clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
  float:right;
  width:1em;
  padding:0 .1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:200%;
  line-height:1.2;
  color:#ddd;
  text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
  content: ★
}

.rating > input:checked ~ label {
  color: #ff7700;
  text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
  text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating> input:checked + label:hover,
.rating> input:checked + label:hover ~ label,
.rating> input:checked ~ label:hover,
.rating> input:checked ~ label:hover ~ label,
.rating> label:hover ~ input:checked ~ label {
  color: #ea0;
  text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
  position:relative;
  top:2px;
  left:2px;
}






     <fieldset class="rating one">
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

    <fieldset class="rating two">
<input type="radio" id="star5-1" name="rating" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
<input type="radio" id="star4-1" name="rating" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
<input type="radio" id="star3-1" name="rating" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
<input type="radio" id="star2-1" name="rating" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
<input type="radio" id="star1-1" name="rating" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>


推荐答案

您的两组评分应该有不同的 name 。

Your two sets of ratings should have a different name.


与name属性具有相同值的单选按钮单选按钮组;

Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at one time.

（ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input ）

只需给每组输入一个不同的名称属性。 EG：

Simply give each group of inputs a different name attribute. EG:

<fieldset class="rating one">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
</fieldset>

<fieldset class="rating two">
    <input type="radio" id="star5-1" name="ratingtwo" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
    <input type="radio" id="star4-1" name="ratingtwo" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
    <input type="radio" id="star3-1" name="ratingtwo" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
    <input type="radio" id="star2-1" name="ratingtwo" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
    <input type="radio" id="star1-1" name="ratingtwo" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
</fieldset>

http://jsfiddle.net/moob/zexvtoz1/13/ 

.rating {
    float:left;
}
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0, 0, 0, 0);
}
.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating:not(:checked) > label:before {
    content: &#9733;
}
.rating > input:checked ~ label {
    color: #ff7700;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating> input:checked + label:hover, .rating> input:checked + label:hover ~ label, .rating> input:checked ~ label:hover, .rating> input:checked ~ label:hover ~ label, .rating> label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

<fieldset class="rating one">
        <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
        <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
        <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
        <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
        <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>
    
    <fieldset class="rating two">
        <input type="radio" id="star5-1" name="ratingtwo" value="5" /><label for="star5-1" title="Rocks!"><span>&#9733</span></label>
        <input type="radio" id="star4-1" name="ratingtwo" value="4" /><label for="star4-1" title="Pretty good"><span>&#9733</span></label>
        <input type="radio" id="star3-1" name="ratingtwo" value="3" /><label for="star3-1" title="Meh"><span>&#9733</span></label>
        <input type="radio" id="star2-1" name="ratingtwo" value="2" /><label for="star2-1" title="Kinda bad"><span>&#9733</span></label>
        <input type="radio" id="star1-1" name="ratingtwo" value="1" /><label for="star1-1" title="Sucks big time"><span>&#9733</span></label>
    </fieldset>

这篇关于CSS以防止星级评分由多个星级评分重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆