input rating right to left

Question

I am making rating system through html/css. Currently rating is active from right to left.. And I want rating from left to right like by default rating sytem. I changed radio button to star icon with the help of fontawesome.

Here is my code:

Html code

<div class="rating-stars">
    <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-0" value="1"  />
    <label for="group-overall_job-<?php echo $row->id;?>-0"></label>
    <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-1" value="2" />
    <label for="group-overall_job-<?php echo $row->id;?>-1"></label>
    <input type="radio"  name="overall_job" id="group-overall_job-<?php echo $row->id;?>-2" value="3" />
    <label for="group-overall_job-<?php echo $row->id;?>-2"></label>
    <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-3" value="4" />
     <label for="group-overall_job-<?php echo $row->id;?>-3"></label>
     <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-4"  value="5" />
     <label for="group-overall_job-<?php echo $row->id;?>-4"></label>
 </div>

Here is my css code

.ratingarea label{
    float:none;
    padding: 0;
}
/*rating stars*/
.rating-stars {
    /*
        margin-bottom: 23px;
    */
}
.rating-stars, .rating-stars label::before {
    /*
        display: inline-block;
    */
}
.rating-stars label:hover, .rating-stars label:hover ~ label {
    color: #e6b02d;
}
.rating-stars * {
    margin: 0;
    padding: 0;
}
.rating-stars input {
    display: none;
}
.rating-stars {
    position: relative;
    top: -2px;
}
.rating-stars label {
    color: #ddd;
}
.rating-stars label::before {
    font-family: 'FontAwesome';
    content: "\f005";
    width: 35px;
    font-size: 1em;
    cursor: pointer;
    /*
        margin-right: -26px;
    */
}
.rating-stars input:checked ~ label {
    color: #e6b02d;
}

Kindly advice me any solution.

Answer 1

Demo: http://jsfiddle.net/GCu2D/905/

Use float:right in label css and set display:inline-block for the parent container.

CSS:

.rating-stars {
    display:inline-block;
}
.rating-stars label {
    color: #ddd;
    float:right;
}

Answer 2

.rating-stars label {
   color: #ddd;
   float: right;
}

Try this out.