このシナリオでスター格付けのためのCSSを書く方法は？

Question

ハーフ・スター・レーティングの問題に悩まされています。私はhttp://codepen.io/mrk1989/pen/mLeHJ

からの参照を取るスター示すための私のHTML構造は、その

<ul class="rateChange"> 
    <li> 
    <input type="radio" id="rating10" name="rating" value="10" /> 
    <label for="rating10" title="5 stars"></label> 
    <input type="radio" id="rating9" name="rating" value="9" /> 
    <label class="half" for="rating9" title="4 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating8" name="rating" value="8" /> 
    <label for="rating8" title="4 stars"></label> 
    <input type="radio" id="rating7" name="rating" value="7" /> 
    <label class="half" for="rating7" title="3 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating6" name="rating" value="6" /> 
    <label for="rating6" title="3 stars"></label> 
    <input type="radio" id="rating5" name="rating" value="5" /> 
    <label class="half" for="rating5" title="2 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating4" name="rating" value="4" /> 
    <label for="rating4" title="2 stars"></label> 
    <input type="radio" id="rating3" name="rating" value="3" /> 
    <label class="half" for="rating3" title="1 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating2" name="rating" value="2" /> 
    <label for="rating2" title="1 star"></label> 
    <input type="radio" id="rating1" name="rating" value="1" /> 
    <label class="half" for="rating1" title="1/2 star"></label> 
    </li> 
</ul> 

と私の場合の星は、UL李タグの下に来て、どのように私はすべてのCSS機能を得るために、私のCSSを変更することができますのようです上のリンクで指定されています（以前のすべてのカレントの星がオンで、すべての前の星にホバーしています）。

これは私が何かをしているjsfiddleリンクですhttps://jsfiddle.net/ae0ypksv/ 充実した機能はありません。

ヘルプは本当に高く評価されています..おかげ

Answer 1

あなたは... this

<h1>Half Star Rating Change Senirow</h1> 

<ul class="rateChange"> 
    <li> 
    <input type="radio" id="rating10" name="rating" value="10" /> 
    <label for="rating10" title="5 stars"></label> 
    <input type="radio" id="rating9" name="rating" value="9" /> 
    <label class="half" for="rating9" title="4 1/2 stars"></label> 

    <input type="radio" id="rating8" name="rating" value="8" /> 
    <label for="rating8" title="4 stars"></label> 
    <input type="radio" id="rating7" name="rating" value="7" /> 
    <label class="half" for="rating7" title="3 1/2 stars"></label> 

    <input type="radio" id="rating6" name="rating" value="6" /> 
    <label for="rating6" title="3 stars"></label> 
    <input type="radio" id="rating5" name="rating" value="5" /> 
    <label class="half" for="rating5" title="2 1/2 stars"></label> 

    <input type="radio" id="rating4" name="rating" value="4" /> 
    <label for="rating4" title="2 stars"></label> 
    <input type="radio" id="rating3" name="rating" value="3" /> 
    <label class="half" for="rating3" title="1 1/2 stars"></label> 

    <input type="radio" id="rating2" name="rating" value="2" /> 
    <label for="rating2" title="1 star"></label> 
    <input type="radio" id="rating1" name="rating" value="1" /> 
    <label class="half" for="rating1" title="1/2 star"></label> 
    </li> 
</ul> 

Answer 2

これは、私はそれだけでそれを確認し解決した解決策のように1 <li>内のすべての入力/ラベルを配置する必要があり

body { 
 
    margin: 5%; 
 
    text-align: center; 
 
    background: aliceblue; 
 
    color: darkred; 
 
} 
 
h1 { 
 
    font-size: 2em; 
 
    margin-bottom: .5rem; 
 
} 
 

 
/* Ratings widget */ 
 
.rate { 
 
    display: inline-block; 
 
    border: 0; 
 
} 
 
/* Hide radio */ 
 
.rate > input { 
 
    display: none; 
 
} 
 
/* Order correctly by floating highest to the right */ 
 
.rate > label { 
 
    float: right; 
 
} 
 
/* The star of the show */ 
 
.rate > label:before { 
 
    display: inline-block; 
 
    font-size: 50px; 
 
    padding: .3rem .2rem; 
 
    margin: 0; 
 
    cursor: pointer; 
 
    font-family: FontAwesome; 
 
    content: '\2605'; /* full star */ 
 
} 
 

 
/* Zero stars rating */ 
 
.rate > label:last-child:before { 
 
    content: '\2605' ; /* empty star outline */ 
 
} 
 

 
input:checked ~ label, /* color current and previous stars on checked */ 
 
label:hover, label:hover ~ label { color: #73B100; } /* color previous stars on hover */ 
 

 
/* Hover highlights */ 
 
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */ 
 
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */ 
 
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D; }

<html> 
 
<head> 
 
<title>Rating</title> 
 
<link type="text/css" href="style.css" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
<h1>Star Rating By Md.Sabbirul Islam</h1> 
 

 

 
<fieldset class="rate"> 
 
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label> 
 
    
 
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label> 
 

 
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label> 
 

 
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label> 
 

 
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label> 
 

 
    <input type="radio" id="rating0" name="rating" value="0" /><label for="rating0" title="No star"></label> 
 
</fieldset> 
 
</body> 
 
</html>