“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Pure CSS to create a star rating component, say no one to believe, do you believe?

What would you do if you had to create the effect shown above? Leave a comment and say what you think. Today we’ll see how pure CSS achieves this effect.

HTML

<div class="radio-stars">
  <input class="sr-only" id="radio-5" type="radio" name="radio-star" value="5" />
  <label class="radio-star" for="radio-5">5</label>
  <input class="sr-only" id="radio-4" type="radio" name="radio-star" value="4" checked="checked" />
  <label class="radio-star" for="radio-4">4</label>
  <input class="sr-only" id="radio-3" type="radio" name="radio-star" value="3" />
  <label class="radio-star" for="radio-3">3</label>
  <input class="sr-only" id="radio-2" type="radio" name="radio-star" value="2" />
  <label class="radio-star" for="radio-2">2</label>
  <input class="sr-only" id="radio-1" type="radio" name="radio-star" value="1" />
  <label class="radio-star" for="radio-1">1</label>
  <span class="radio-star-total"></span>
</div>
Copy the code

Radio-stars is a container. Radio-star and SR-only correspond to one. The default value is 4 stars.

And here’s the highlight

css

.radio-stars {
  display: inline-block;
  position: relative;
  unicode-bidi: bidi-override;
  direction: rtl;
  counter-reset: star-rating;
  font-size: 0;
}
.radio-stars:hover .radio-star::before {
  content: "Do";
}
.radio-stars:hover .radio-star:hover::before..radio-stars:hover .radio-star:hover ~ .radio-star::before {
  content: "★";
}

.radio-star {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  padding: 0 2px;
  width: 0.7 em;
  direction: ltr;
  color: #1199ff90;
  font-size: 40px;
  white-space: nowrap;
}
.radio-star::before {
  content: "Do";
}
.radio-star:hover..radio-star:hover ~ .radio-star.input:checked ~ .radio-star {
  color: #1199ff;
}
input:checked ~ .radio-star {
  counter-increment: star-rating;
}
input:checked ~ .radio-star::before {
  content: "★";
}

.radio-star-total {
  pointer-events: none;
  direction: ltr;
  unicode-bidi: bidi-override;
  position: absolute;
  right: -2em;
  bottom: 0.5 em;
  color: gray;
  color: white;
  font-size: 20px;
}
.radio-star-total::before {
  content: counter(star-rating) "/ 5";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  clip: rect(0.0.0.0);
  border: 0;
}

html {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f577a8;
  height: 100%;
}
Copy the code

Mainly used content, counter, counter-increment, counter-reset and other attributes.

instructions

compatibility

Counter to describe

Insert counter. Counter () can only be used on content properties in CSS2.1. If you want to repeat the counter more than once, use counters()

Counter – increment description

The counter-increment property sets the counter increment for each occurrence of a picker. The default increment is 1. If “display: None “is used, the count cannot be increased. If you use “visibility: hidden”, increase the count.