html - 选中前一个单选按钮的 CSS 选择器

Question

我正在通过一些单选按钮构建一个小星 CSS 评级，并且它工作正常。我无法在选择 radio 之前填写星星，所以如果选择了星星 3，那么星星 1 和 2 也会被填入。这是我目前所拥有的:

#review-form input,
#review-form textarea {
  background: none repeat scroll 0 0 #333333;
  border: 0 none;
  color: #fff;
  margin: 0;
  max-width: 100%;
  padding: 7px 4px;
}
#review-form .radio {
  display: inline-block;
}
#review-form input[type=radio] {
  display: none;
}
#review-form input[type=radio] + label {
  display: block;
}
#review-form input[type='radio'] + label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 8px;
  width: 23px;
}
#review-form input[type=radio] + label:before {
  content: "\f006";  /* Radio Unchecked */
}
#review-form input[type=radio]:checked + label:before {
  content: "\f005";  /* Radio Checked */
}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet" />
<div class="form-group" id="review-form">
  <label for="rating">RATING</label>
  <span class="star-rating star-5">
                  <div class="radio">
                    <input type="radio" id="option1" name="star-radios" value="1">
                    <label for="option1"></label>
                  </div>
                  <div class="radio">
                    <input type="radio" id="option2" name="star-radios" value="2">
                    <label for="option2"></label>
                  </div>
                  <div class="radio">
                    <input type="radio" id="option3" name="star-radios" value="3">
                    <label for="option3"></label>
                  </div>
                  <div class="radio">
                    <input type="radio" id="option4" name="star-radios" value="4">
                    <label for="option4"></label>
                  </div>
                  <div class="radio">
                    <input type="radio" id="option5" name="star-radios" value="5">
                    <label for="option5"></label>
                  </div>

                </span>

</div>

---

Codepen

---

我想知道是否有可用的 CSS 选择器(或其他东西)，我可以在其中更改选择单选按钮之前的星号。尽可能避免使用 JS。

Answer 1

CSS 方法:

只有 CSS，你可以使用 flexbox。

• 使用 flex-direction: row-reverse;

  row-reverse: Behaves the same as row but the main-start and main-end points are permuted.

• 使用 general sibling selector.

  The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

---

#review-form .star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
}

#review-form input[type=radio] + .label_star::before {
  content: "\f006";
  /* Radio Unchecked */
}

#review-form input[type=radio]:checked ~ .label_star::before {
  content: "\f005";
    /* Radio Checked */
}

#review-form .star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
}
#review-form input,
#review-form textarea {
  background: none repeat scroll 0 0 #333333;
  border: 0 none;
  color: #fff;
  margin: 0;
  max-width: 100%;
  padding: 7px 4px;
}
#review-form .radio {
  display: inline-block;
}
#review-form input[type=radio] {
  display: none;
}
#review-form input[type=radio] + label {
  display: block;
}
#review-form input[type='radio'] + .label_star:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //padding-right: 8px;
  width: 23px;
}
#review-form input[type=radio] + .label_star::before {
  content: "\f006";
  /* Radio Unchecked */
}
#review-form input[type=radio]:checked ~ .label_star::before {
  content: "\f005";
  /* Radio Checked */
}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet" />
<div class="form-group" id="review-form">
  <label id="rating" for="rating">RATING</label>
  <span class="star-rating star-5">
  <input type="radio" id="option5" name="star-radios" value="5">
  <label class="label_star" id="option5_label" for="option5"></label>
  <input type="radio" id="option4" name="star-radios" value="4">
  <label class="label_star" id="option4_label" for="option4"></label>
  <input type="radio" id="option3" name="star-radios" value="3">
  <label class="label_star" id="option3_label" for="option3"></label>
  <input type="radio" id="option2" name="star-radios" value="2">
  <label class="label_star" id="option2_label" for="option2"></label>
  <input type="radio" id="option1" name="star-radios" value="1">
  <label class="label_star" id="option1_label" for="option1"></label>
</span>
</div>

---

Revised Codepen

---

JS 方法:

如评论中所述，我不久前创建了一个小的评级组件，可能会有帮助。做了一些调整以满足要求，但它使用 JS。

该组件使用以下内容:

• SVG 图标
• SVG Spritesheet
• HTML5
• Javascript
• jQuery
• CSS3

---

简单的评分组件

jQuery Dependant (not complex, could be removed).

//Summary: Star Rating Component, get and/or set a rating displaying icons.
(function() {
// Assign variables for jQuery Objects and classes as string.
  var $rating = $(".rating"),
    sRatingClass = "rated",
    sIcon = "icon-star-full",
    $icon = $("." + sIcon);

// Iterate over jQuery Rating objects.
  $.each($rating, function() {
  // Get the rating if set, you can set this with a REST service and get the current rating.
    var iRating = $(this).data("rating");
    // Filter the icons with a :nth-child pseudo-class and add the 'active' class.
    $(this).find("."+ sIcon + ":nth-child(-n+" + iRating + ")").addClass(sRatingClass);
  });

// Add click event listener to jQuery Icon Objects.
  $icon.on("click", function() {
  // Get the index of the icon being clicked.
    var iIconIndex = $(this).index() + 1,
    // Select the parent of the icon being clicked.
      $iconParent = $(this).parent();
      // Remove the 'active' class to all the icons before setting the new ones.
    $iconParent.find("." + sIcon).removeClass(sRatingClass);
    // Add the 'active' class to the icon clicked and its previous siblings.
    $iconParent.find("." + sIcon + ":nth-child(-n+" + iIconIndex + ")").addClass(sRatingClass);
    // Set the rating to the parent, this can be sent to the backend with a REST service.
    $iconParent.attr("data-rating", iIconIndex);
  });

})();

.svg-spritesheet { /* Hide the SVG Spritesheet to prevent some browsers to render an empty white space. */
  display: none;
}
.icon { /* Default icon properties, using the currentColor variable to be able to change the icon's color with the CSS color property. */
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  cursor: pointer;
}
.icon-star-full { /* The icon's fill color */
  color: #C1C2C4;
}
.icon-star-full.rated { /* The icon's 'active' fill color */
  color: #F6DB08;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="rating" data-rating="4">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</section>

<section class="rating" data-rating="0">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</section>



<svg class="svg-spritesheet">
  <symbol id="icon-star-full" viewBox="0 0 32 32">
    <title>star-full</title>
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

---

jsFiddle

---

使用 IcoMoon免费星形图标。

---

Playground :

你可以加入一些动画来改善视觉效果，就像AnimateCss一样。

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

//Summary: Star Rating Component, get and/or set a rating displaying icons.
(function() {
  // Assign variables for jQuery Objects and classes as string.
  var $rating = $(".rating"),
    sRatingClass = "rated",
    sIcon = "icon-star-full",
    $icon = $("." + sIcon);

  // Iterate over jQuery Rating objects.
  $.each($rating, function() {
    // Get the rating if set, you can set this with a REST service and get the current rating.
    var iRating = $(this).data("rating");
    // Filter the icons with a :nth-child pseudo-class and add the 'active' class.
    $(this).find("." + sIcon + ":nth-child(-n+" + iRating + ")").addClass(sRatingClass);
  });

  // Add click event listener to jQuery Icon Objects.
  $icon.on("click", function() {
  	// Animate icon
    $(this).animateCss("bounceIn");
    // Get the index of the icon being clicked.
    var iIconIndex = $(this).index() + 1,
      // Select the parent of the icon being clicked.
      $iconParent = $(this).parent();
    // Remove the 'active' class to all the icons before setting the new ones.
    $iconParent.find("." + sIcon).removeClass(sRatingClass);
    // Add the 'active' class to the icon clicked and its previous siblings.
    $iconParent.find("." + sIcon + ":nth-child(-n+" + iIconIndex + ")").addClass(sRatingClass);
    // Set the rating to the parent, this can be sent to the backend with a REST service.
    $iconParent.attr("data-rating", iIconIndex);
  });

})();

.svg-spritesheet { /* Hide the SVG Spritesheet to prevent some browsers to render an empty white space. */
  display: none;
}
.icon { /* Default icon properties, using the currentColor variable to be able to change the icon's color with the CSS color property. */
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  cursor: pointer;
}
.icon-star-full { /* The icon's fill color */
  color: #C1C2C4;
  font-size: 3em;
}
.icon-star-full.rated { /* The icon's 'active' fill color */
  color: #F6DB08;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animated.bounceIn {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}
@keyframes bounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="rating" data-rating="4">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</section>

<section class="rating" data-rating="0">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</section>



<svg class="svg-spritesheet">
  <symbol id="icon-star-full" viewBox="0 0 32 32">
    <title>star-full</title>
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>