简单评级明星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>