显示星星而不是单选按钮

Question

我们为访问者提供了一个选项，如下图所示。他们将选择单选按钮并单击submit按钮。

但我想样改变这个，手段来替代点击Radio buttons我们应该点击stars

我可以通过以下代码隐藏星星：

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

html

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

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

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>