CSS - 評価のCSSシステム

Question

私はウェブ上で見つけたいくつかの評価システムCSSを使用しています。 現在、私はそれを動作させることができましたが、複数の評価が表示されているときに問題があります。

最後の評価クラスのみが動作しています。

.rate { 
 
    float: left; 
 
    pointer-events: none; 
 
} 
 

 
.rate:not(:checked)>input { 
 
    position: absolute; 
 
    top: -9999px; 
 
} 
 

 
.rate:not(:checked)>label { 
 
    float: right; 
 
    width: 1em; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    color: #ccc; 
 
} 
 

 
.rate:not(:checked)>label:before { 
 
    content: '★ '; 
 
} 
 

 
.rate>input:checked~label { 
 
    color: #ffc700; 
 
} 
 

 
.rate:not(:checked)>label:hover, 
 
.rate:not(:checked)>label:hover~label { 
 
    color: #deb217; 
 
} 
 

 
.rate>input:checked+label:hover, 
 
.rate>input:checked+label:hover~label, 
 
.rate>input:checked~label:hover, 
 
.rate>input:checked~label:hover~label, 
 
.rate>label:hover~input:checked~label { 
 
    color: #c59b08; 
 
}

<div class="rate"> 
 
    <input type="radio" id="star5" name="rate" value="5" /> 
 
    <label for="star5" title="text">5 stars</label> 
 
    <input type="radio" id="star4" name="rate" value="4" checked/> 
 
    <label for="star4" title="text">4 stars</label> 
 
    <input type="radio" id="star3" name="rate" value="3" /> 
 
    <label for="star3" title="text">3 stars</label> 
 
    <input type="radio" id="star2" name="rate" value="2" /> 
 
    <label for="star2" title="text">2 stars</label> 
 
    <input type="radio" id="star1" name="rate" value="1" /> 
 
    <label for="star1" title="text">1 star</label> 
 
</div> 
 

 
<div class="rate"> 
 
    <input type="radio" id="star5" name="rate" value="5" checked/> 
 
    <label for="star5" title="text">5 stars</label> 
 
    <input type="radio" id="star4" name="rate" value="4" /> 
 
    <label for="star4" title="text">4 stars</label> 
 
    <input type="radio" id="star3" name="rate" value="3" /> 
 
    <label for="star3" title="text">3 stars</label> 
 
    <input type="radio" id="star2" name="rate" value="2" /> 
 
    <label for="star2" title="text">2 stars</label> 
 
    <input type="radio" id="star1" name="rate" value="1" /> 
 
    <label for="star1" title="text">1 star</label> 
 
</div>

のみ最後のdivが正しく動作しています。

Answer 1

すべてのラジオボタンに同じ「名前」タグがある場合、2つの異なるdivにある場合でも、ラジオボタンの1つのセットとして扱われます。あなたは二つの問題を持っている

<div class="rate"> 
    <input type="radio" name="rate" value="5" /> 
    <label title="text">5 stars</label> 
    <input type="radio" name="rate" value="4" checked/>      
    <label title="text">4 stars</label>         
    <input type="radio" name="rate" value="3" /> 
    <label title="text">3 stars</label>         
    <input type="radio" name="rate" value="2" />       
    <label title="text">2 stars</label>         
    <input type="radio" name="rate" value="1" />       
    <label title="text">1 star</label> 
</div> 

<div class="rate"> 
    <input type="radio" name="rate1" value="5" checked/> 
    <label title="text">5 stars</label> 
    <input type="radio" name="rate1" value="4" />      
    <label title="text">4 stars</label>         
    <input type="radio" name="rate1" value="3" /> 
    <label title="text">3 stars</label>         
    <input type="radio" name="rate1" value="2" />       
    <label title="text">2 stars</label>         
    <input type="radio" name="rate1" value="1" />       
    <label title="text">1 star</label> 
</div> 

Answer 2

：

また、それはあなたがこのhttps://jsfiddle.net/cornelraiu/70sk3ft6/1/ようなあなたのhtmlを持っている必要があり、悪い習慣が

は、それが固定させるには要素に重複したIDを持つことである

1. 重複したID。 IDは一意でなければなりません。
2. 評価グループの名前は同じです。各グループには異なる名前が必要です

すべての問題を修正しました。

.rate { 
 
    float: left; 
 
    /*pointer-events: none;*/ 
 
} 
 

 
.rate:not(:checked) > input { 
 
    position: absolute; 
 
    top: -9999px; 
 
} 
 

 
.rate:not(:checked) > label { 
 
    float: right; 
 
    width: 1em; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    cursor: pointer; 
 
    font-size: 12px; 
 
    color: #ccc; 
 
} 
 

 
.rate:not(:checked) > label:before { content: '★ '; } 
 

 
.rate > input:checked ~ label { color: #ffc700; } 
 

 
.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label { color: #deb217; } 
 

 
.rate > input:checked + label:hover, .rate > input:checked + label:hover ~ label, .rate > input:checked ~ label:hover, .rate > input:checked ~ label:hover ~ label, .rate > label:hover ~ input:checked ~ label { color: #c59b08; }

<div class="rate"> 
 
    <input type="radio" id="v1_star5" name="rate1" value="5" /> 
 
    <label for="v1_star5" title="text">5 stars</label> 
 
    <input type="radio" id="v1_star4" name="rate1" value="4" checked/>      
 
    <label for="v1_star4" title="text">4 stars</label>         
 
    <input type="radio" id="v1_star3" name="rate1" value="3" /> 
 
    <label for="v1_star3" title="text">3 stars</label>         
 
    <input type="radio" id="v1_star2" name="rate1" value="2" />       
 
    <label for="v1_star2" title="text">2 stars</label>         
 
    <input type="radio" id="v1_star1" name="rate1" value="1" />       
 
    <label for="v1_star1" title="text">1 star</label> 
 
    </div> 
 

 
    <div class="rate"> 
 
    <input type="radio" id="v2_star5" name="rate2" value="5" checked/> 
 
    <label for="v2_star5" title="text">5 stars</label> 
 
    <input type="radio" id="v2_star4" name="rate2" value="4" />      
 
    <label for="v2_star4" title="text">4 stars</label>         
 
    <input type="radio" id="v2_star3" name="rate2" value="3" /> 
 
    <label for="v2_star3" title="text">3 stars</label>         
 
    <input type="radio" id="v2_star2" name="rate2" value="2" />       
 
    <label for="v2_star2" title="text">2 stars</label>         
 
    <input type="radio" id="v2_star1" name="rate2" value="1" />       
 
    <label for="v2_star1" title="text">1 star</label> 
 
    </div>

私はあなたが完全な最終結果を見ることができるようにpointer-eventsスタイルを削除しました。