Display Stars instead of Radio buttons

Question

We provide an option for visitors to give ratings as below image. they will select radio button & they will click on submit button.

but I want to change like this , means instead of clicking on Radio buttons we should click on stars

I can hide stars by this code :

.ratings .rating-box .rating 
{
    display : none;
}

Now I want to change Radio buttons to stars. Also I want to display each star nearer to each other as in the 2nd image.

css

  input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }

.checkbox, .radio {
    position: relative;
    top: -1px;
    display: inline-block;
}

phtml

<?php if( $this->getRatings() && $this->getRatings()->getSize()): ?>
                <h4><?php echo $this->__('Your Rating') ?> <em class="required"></em></h4>
                <span id="input-message-box"></span>
                <table class="data-table review-summary-table ratings" id="product-review-table">
                    <col width="1" />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">1</span>
                                    <span class="rating nobr" style="width:20%;"><?php echo $this->__('1 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">2</span>
                                    <span class="rating nobr" style="width:40%;"><?php echo $this->__('2 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">3</span>
                                    <span class="rating nobr" style="width:60%;"><?php echo $this->__('3 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">4</span>
                                    <span class="rating nobr" style="width:80%;"><?php echo $this->__('4 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">5</span>
                                    <span class="rating nobr" style="width:100%;"><?php echo $this->__('5 star') ?></span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($this->getRatings() as $_rating): ?>
                        <tr>
                            <th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></th>
                        <?php foreach ($_rating->getOptions() as $_option): ?>
                            <td class="value"><label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"><input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" /></label></td>
                        <?php endforeach; ?>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
                <input type="hidden" name="validate_rating" class="validate-rating" value="" />
                <script type="text/javascript">decorateTable('product-review-table')</script>
            <?php endif; ?>

you can visit link and click on "Add Review` Tab to see radio buttons and stars

Answer 1

Do like this

.wrapper {
  display: inline-block;
}
.wrapper * {
  float: right;
}
input {
  display: none;
}
label {
  font-size: 30px;
}

input:checked ~ label {
  color: red;
}
/*
label:hover,
label:hover ~ label {
  color: red;
}
*/
/*
input:checked ~ label:hover,
input:checked ~ label:hover ~ label {
  color: lime !important;
}
*/

<div class="wrapper">
  <input type="radio" id="r1" name="rg1">
  <label for="r1">&#10038;</label>
  <input type="radio" id="r2" name="rg1">
  <label for="r2">&#10038;</label>
  <input type="radio" id="r3" name="rg1">
  <label for="r3">&#10038;</label>
  <input type="radio" id="r4" name="rg1">
  <label for="r4">&#10038;</label>
  <input type="radio" id="r5" name="rg1">
  <label for="r5">&#10038;</label>
</div>

Answer 2

here is the HTML code for the radio buttons in 5 4 3 2 1 order.

<div class="starRating">
  <input id="r5" type="radio" name="rating" value="5">
  <label for="r5">5</label>
  <input id="r4" type="radio" name="rating" value="4">
  <label for="r4">4</label>
  <input id="r3" type="radio" name="rating" value="3">
  <label for="r3">3</label>
  <input id="r2" type="radio" name="rating" value="2">
  <label for="r2">2</label>
  <input id="r1" type="radio" name="rating" value="1">
  <label for="r1">1</label>
</div>

Now add some CSS elements to get the Stars instead and reverse the order to 1 2 3 4 5.

.starRating:not(old){
  display        : inline-block;
  width          : 7.5em;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

now hide the radio buttons:

.starRating:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}

off state stars or the unrated stars

.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('starimg.png'); // copy your star image url Here
  background-size : contain;
}

pseudo element of the labels. This element pushes down and eventually hides the labels.(of the radio buttons)

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background      : url('starimg.png'); // copy your star image url Here
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

Now, determining the status of the stars according to the above defined element codes

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}

Hope this helped you!