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中，它們也只會被視爲一組單選按鈕。

而且，它是不好的做法，對內容重複的ID

有它固定的，你應該有你的HTML這樣https://jsfiddle.net/cornelraiu/70sk3ft6/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

你有兩個問題：

1. 重複的Ids。 Ids必須是獨一無二的。
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風格，所以你可以看到完整的最終結果。