对单选按钮使用 Font Awesome 星级评分

Question

我尝试加载一些很棒的字体 css 来显示星级而不是默认的单选按钮。

我将其用于使用星级的 Magento 网店。
默认代码是动态的，如下所示：

            <?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; ?>

我试过这个 JSFiddle，但我无法完成它，它会根据评论填充星星。所以输入 5 将填充 5 颗星。也是； http://codepen.io/jamesbarnett/pen/vlpkh

我做错了什么？

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

Answer 1

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

变化：

.rating > label:before

收件人：

.rating label:before

Answer 2

它不能与您当前的HTML结构一起工作。它仅使用通过 for="idOfInput" 附加到每个标签直接前面的一些隐藏 <input type="radio" /> 的 <label> 序列。所有这些元素必须彼此相邻，即在相同的 DOM 级别上，具有相同的父元素。否则，您将需要 CSS 中的某种 父选择器 - 而那根本不存在。

您在评论中准确地链接了您自己需要的内容。使用图像而不是字符的效果几乎相同，但解决方案减少了很多 CSS 的必要性。

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/

对单选按钮使用 Font Awesome 星级评分

Use Font Awesome star rating for radio buttons

html

css

magento

jsfiddle