簡單評級明星CSS

Question

我正在嘗試使用HTML和CSS構建簡單的評分系統。這是一個非常簡單的評級酒吧，由5顆星組成。

fieldset, 
 
label { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 20px; 
 
} 
 

 
.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; 
 
} 
 

 
.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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<fieldset class="rating"> 
 

 
    <input type="radio" id="5star" name="rating" value="5" /> 
 
    <label class="full" for="star5" title="Excellent"></label> 
 

 
    <input type="radio" id="4halfstar" name="rating" value="4.5" /> 
 
    <label class="half" for="4halfstar" title="Good"></label> 
 

 
    <input type="radio" id="4star" name="rating" value="4" /> 
 
    <label class="full" for="4star" title="Pretty good"></label> 
 

 
    <input type="radio" id="3halfstar" name="rating" value="3.5" /> 
 
    <label class="half" for="3halfstar" title="Nice"></label> 
 

 
    <input type="radio" id="3star" name="rating" value="3" /> 
 
    <label class="full" for="3star" title="Ok"></label> 
 

 
    <input type="radio" id="2halfstar" name="rating" value="2.5" /> 
 
    <label class="half" for="2halfstar" title="Kinda bad"></label> 
 

 
    <input type="radio" id="2star" name="rating" value="2" /> 
 
    <label class="full" for="2star" title="Bad"></label> 
 

 
    <input type="radio" id="1halfstar" name="rating" value="1.5" /> 
 
    <label class="half" for="1halfstar" title="Meh"></label> 
 

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

 
    <input type="radio" id="halfstar" name="rating" value="0.5" /> 
 
    <label class="half" for="halfstar" title="Worst"></label> 
 

 
</fieldset>

的問題是，我只能選擇明星可達4.5星這是5星的一半，我想要的是選擇全部5星級。我在下面列出了評級欄的圖片。幫助真的很感激。

Rating bar

Answer 1

只是需要改變star5到5star一個typo-：

fieldset, 
 
label { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 20px; 
 
} 
 

 
.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; 
 
} 
 

 
.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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<fieldset class="rating"> 
 

 
    <input type="radio" id="5star" name="rating" value="5" /> 
 
    <label class="full" for="5star" title="Excellent"></label> 
 

 
    <input type="radio" id="4halfstar" name="rating" value="4.5" /> 
 
    <label class="half" for="4halfstar" title="Good"></label> 
 

 
    <input type="radio" id="4star" name="rating" value="4" /> 
 
    <label class="full" for="4star" title="Pretty good"></label> 
 

 
    <input type="radio" id="3halfstar" name="rating" value="3.5" /> 
 
    <label class="half" for="3halfstar" title="Nice"></label> 
 

 
    <input type="radio" id="3star" name="rating" value="3" /> 
 
    <label class="full" for="3star" title="Ok"></label> 
 

 
    <input type="radio" id="2halfstar" name="rating" value="2.5" /> 
 
    <label class="half" for="2halfstar" title="Kinda bad"></label> 
 

 
    <input type="radio" id="2star" name="rating" value="2" /> 
 
    <label class="full" for="2star" title="Bad"></label> 
 

 
    <input type="radio" id="1halfstar" name="rating" value="1.5" /> 
 
    <label class="half" for="1halfstar" title="Meh"></label> 
 

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

 
    <input type="radio" id="halfstar" name="rating" value="0.5" /> 
 
    <label class="half" for="halfstar" title="Worst"></label> 
 

 
</fieldset>