간단한 등급 스타 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>

문제

가 난 단지 5 스타의 절반 인 4.5 성급에 별을 선택할 수 있다는 것입니다, 내가 원하는 전체 5 별을 선택하는 것입니다. 아래에 등급 표시 줄의 이미지를 포함 시켰습니다. 도움말 정말 고맙습니다.

Rating bar

Answer 1

star55star을 변경해야 그냥 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>