評分星級CSS（懸停位置變化）

Question

我試過了我的網頁的評級星，但是當我選擇星星時，黃色星總是從右側開始。

我不想改變我的「輸入ID排行榜」

如何我開始從左至右黃星？ （輸入ID總是會從1開始）

例如：my project example

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
      fieldset, label { margin: 0; padding: 0; } 
 
      body{ margin: 20px; } 
 
      h1 { font-size: 1.5em; margin: 10px; } 
 

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

 
      .rating > input:checked ~ label, 
 
      .rating:not(:checked) > label:hover, 
 
      .rating:not(:checked) > label:hover ~ label { color: #FFD700; } 
 

 
      .rating > input:checked + label:hover, 
 
      .rating > input:checked ~ label:hover, 
 
      .rating > label:hover ~ input:checked ~ label, 
 
      .rating > input:checked ~ label:hover ~ label { color: #FFED85; } 

 <fieldset class="rating"> 
 
        <input class="stars" type="radio" id="star1" name="rating" value="1" /> 
 
         <label class = "full" for="star1" title="Sucks big time - 1 star">1</label> 
 
         <input class="stars" type="radio" id="star2" name="rating" value="2" /> 
 
         <label class = "full" for="star2" title="Kinda bad - 2 stars">2</label> 
 
         <input class="stars" type="radio" id="star3" name="rating" value="3" /> 
 
         <label class = "full" for="star3" title="Meh - 3 stars">3</label> 
 
         <input class="stars" type="radio" id="star4" name="rating" value="4" /> 
 
         <label class = "full" for="star4" title="Pretty good - 4 stars">4</label> 
 
         <input class="stars" type="radio" id="star5" name="rating" value="5" /> 
 
         <label class = "full" for="star5" title="Awesome - 5 stars">5</label> 
 
       
 
        </fieldset>

Answer 1

您可以將輸入的順序從5到1，而不是相反。

此加入CSS：

.rating > label{float:right} 

  /****** Rating Starts *****/ 
 
      @import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
      fieldset, label { margin: 0; padding: 0; } 
 
      body{ margin: 20px; } 
 
      h1 { font-size: 1.5em; margin: 10px; } 
 

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

 
      .rating > input:checked ~ label, 
 
      .rating:not(:checked) > label:hover, 
 
      .rating:not(:checked) > label:hover ~ label { color: #FFD700; } 
 

 
      .rating > input:checked + label:hover, 
 
      .rating > input:checked ~ label:hover, 
 
      .rating > label:hover ~ input:checked ~ label, 
 
      .rating > input:checked ~ label:hover ~ label { color: #FFED85; }  
 

 
    .rating > label{float:right}

 <fieldset class="rating"> 
 
     
 
          <input class="stars" type="radio" id="star5" name="rating" value="5" /> 
 
         <label class = "full" for="star5" title="Awesome - 5 stars">5</label> 
 
             <input class="stars" type="radio" id="star4" name="rating" value="4" /> 
 
         <label class = "full" for="star4" title="Pretty good - 4 stars">4</label> 
 
               <input class="stars" type="radio" id="star3" name="rating" value="3" /> 
 
         <label class = "full" for="star3" title="Meh - 3 stars">3</label> 
 
         <input class="stars" type="radio" id="star2" name="rating" value="2" /> 
 
         <label class = "full" for="star2" title="Kinda bad - 2 stars">2</label> 
 

 

 

 

 
        <input class="stars" type="radio" id="star1" name="rating" value="1" /> 
 
         <label class = "full" for="star1" title="Sucks big time - 1 star">1</label> 
 
        </fieldset>