Ratings Stars Css (hover Position Change)

I tried ratings stars for my webpage.But yellow star always starts on the right when I selected stars . I don't want to change my 'input id ranking' How I start yellow star from l

Solution 1:

You can order your input from 5 to 1 instead of the reverse.

Add this to 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}

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