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结构。它仅使用<label>序列通过for="idOfInput"直接在每个标签前面隐藏<input type="radio" />，仅。所有这些元素必须彼此相邻，即在相同的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>

发现 http://css-stars.com/css-star-rating/

对单选按钮使用Font Awesome星级

2 个答案: