javascript - How to display a 5 star rating with multiple graduations (full and half stars) in pure CSS? - Stack Overflow

admin管理员组

文章数量:1415119

I want to display (yes display only, no clicking) the average rating of an entity with a typical 5-star-marker. This marker should be adjustable via JavaScript so I can set/update the current average rating. This should be include graduations (full and half stars).

The solutions I already found use special fonts, images and are to plex (in my opinion) (e.g. use to many html elements). I would prefer a solution with minimal code with is easy to integrate.

I want to display (yes display only, no clicking) the average rating of an entity with a typical 5-star-marker. This marker should be adjustable via JavaScript so I can set/update the current average rating. This should be include graduations (full and half stars).

The solutions I already found use special fonts, images and are to plex (in my opinion) (e.g. use to many html elements). I would prefer a solution with minimal code with is easy to integrate.

• javascript
• html
• css

Share Improve this question Follow asked Aug 11, 2018 at 18:35 ultimateultimate 74355 silver badges1818 bronze badges 5

• @Paulie_D he's answering his own question ... – Temani Afif Commented Aug 11, 2018 at 19:34
• That doesn't make it a good question or remove the responsibility to ask it the right way. – Paulie_D Commented Aug 11, 2018 at 19:35
• We don't dump general requests as questions and then answer them on SO. That's what personal blogs are for. – Paulie_D Commented Aug 11, 2018 at 19:37
• I did research but none of the solutions I found did what I wanted. That's why I thought it might be helpful to share my solution. I think this is what the feature "answer your own question" is for. Not everybody has a personal blog to do so and using Stack overflow will allow much more people to find that solution. So why should I add an inplete code snippet / solution to the question if I answer it right away? – ultimate Commented Aug 11, 2018 at 19:51
• you said it --> none of the solutions I found did what I wanted. : so you simply didn't find a solution that is suitable for you and you shared one that is good for you. So there is no issue or problem, but a simple preference – Temani Afif Commented Aug 11, 2018 at 20:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Here's my own solution. All you have to add in your HTML is to nested divs, which then are styled via the stylesheet contained below:

<div class="stars"><div class="percent"></div></div>

You can then simply set the amount of stars in percent (20% per star; 10% for a half star) by setting css width of the .percent element. (For demonstration purposes the percent value is added in the html here, but it can be added or modified later via JS)

.stars {
    position: relative;
    float: left;
    font-size: 50pt;
	  height: 1em;
    line-height: 1em;
}

.stars:before {	
    content: "\2606\2606\2606\2606\2606";
    float: left;
    z-index: 1;
}

.stars .percent {
    position: absolute;
    left: 0;
    float: left;
    overflow: hidden;
    z-index: -1;
}

.stars .percent:after {	
    content: "\2605\2605\2605\2605\2605";
    color: rgb(255, 200, 0);
}

li {
  display: table;
}

<ul>
<li><div class="stars"><div class="percent" style="width:  0%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 10%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 20%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 30%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 40%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 50%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 60%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 70%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 80%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 90%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 100%;"></div></div></li>
</ul>

The above snippet shows all graduations from 0% to 100% in 10% steps. Note that smaller steps will not equally spread inside the stars, because the width adjustment does not consider the space between the stars - but 10% steps are fine.

本文标签：