显示星星而不是单选按钮

Question

我们为访问者提供了如下图所示的评分选项。他们将选择单选按钮并点击submit 按钮。

但我想更改为 this ，这意味着我们应该点击 stars 而不是点击 Radio buttons

我可以通过这段代码隐藏星星：

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

现在我想将Radio buttons 更改为星星。我还想像第二张图片一样显示每颗星星更靠近彼此。

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

您可以访问link 并点击“添加评论”选项卡以查看单选按钮和星星

Answer 1

这样做

.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

这是 5 4 3 2 1 顺序的单选按钮的 HTML 代码。

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

现在添加一些 CSS 元素来获取星星并将顺序反转为 1 2 3 4 5。

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

现在隐藏单选按钮：

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

关闭状态的星星或未评级的星星

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

标签的伪元素。这个元素下推并最终隐藏标签。（单选按钮）

.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;
}

现在，根据上面定义的元素代码确定星星的状态

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

希望这对您有所帮助！