Evaluations stars CSS (changement de position en stationnaire)

Question

J'ai essayé des étoiles pour mon site web.Mais l'étoile jaune commence toujours sur la droite quand j'ai sélectionné les étoiles.

Je ne veux pas changer mon « id d'entrée classement »

Comment je commence étoile jaune de gauche? (Id d'entrée toujours commence par 1)

exemple: 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

Vous pouvez commander votre entrée de 5 à 1 au lieu de l'inverse.

Ajouter à ce 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>