評価の星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>