CODEWITHSUNDEEP
htmlcssmagentojsfiddle
JGeer
JGeer

Reputation: 1852

Use Font Awesome star rating for radio buttons

I try to load some font awesome css to display star rating instead of the default radio buttons.

I use this for a Magento webshop, that uses star rating.
The default code is dynamic and looks like this:

            <?php foreach ($this->getRatings() as $_rating): ?>
                <tr>
                    <th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></th>
                <?php foreach ($_rating->getOptions() as $_option): ?>
                    <td class="value"><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 class = "full" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"></label></td>
                <?php endforeach; ?>
                </tr>
            <?php endforeach; ?>

I tried this JSFiddle, but I can't get it done, that it will fill the stars based on the review. So input 5 will be 5 stars filled. So also; http://codepen.io/jamesbarnett/pen/vlpkh

What am I doing wrong?

https://jsfiddle.net/tLj2ybnu/7/

Upvotes: 0

Views: 8230

Answers (2)

connexo
connexo

Reputation: 56773

It cannot work with your current HTML structure. It works only using a sequence of <label> attached via for="idOfInput" to some hidden <input type="radio" /> preceding each label directly. All those elements must be next to each other, that is, on the same DOM Level, having the same parent element. Otherwise you would need some sort of parent selector in CSS - and that simply does not exist.

You linked exactly what you need yourself in a comment. Using an image instead of a character works almost identical, but the solution makes alot less CSS necessary.

http://codepen.io/anon/pen/KpaZYJ

.rating-wrapper {
  overflow: hidden;
  display: inline-block;
}

.rating-input {
  position: absolute;
  left: 0;
  top: -50px;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
  background-position: 0 0;
}

.rating-wrapper:hover .rating-star:hover,
.rating-wrapper:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
  background-position: 0 0;
}

.rating-star,
.rating-wrapper:hover .rating-star {
  float: right;
  display: block;
  width: 16px;
  height: 16px;
  background: url('http://css-stars.com/wp-content/uploads/2013/12/stars.png') 0 -16px;
}
<div class="rating-wrapper">
  <input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1" />
  <label for="rating-input-1-5" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1" />
  <label for="rating-input-1-4" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1" />
  <label for="rating-input-1-3" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" />
  <label for="rating-input-1-2" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" />
  <label for="rating-input-1-1" class="rating-star"></label>
</div>

Found on http://css-stars.com/css-star-rating/

Upvotes: 0

Someone
Someone

Reputation: 257

https://jsfiddle.net/tLj2ybnu/4/

Change:

.rating > label:before

To:

.rating label:before

Upvotes: 2

Related Questions