$1.29

How can I show rating stars on static website?

Ask a question+
1

I want to show star rating on my statis website. Use of pure HTML/CSS is highly appreciated. Thank you in advance.

Sanmay Joshi 70
add comment

1 Answer

1

Various ways

There are a lot of ways to achive it like:

  • using Unicode symbols,
  • using SVG icons,
  • using PNG image, etc.

Answer

I have explained the one using Unicode symbols, since it is pure HTML/CSS way, and pretty straightforward. I found out about this way on CodePen, though the code there was slightly off. Anyway, I have corrected it. The Pen also has example for method that uses PNG image. Do check it out.

Here is the code

<!-- 
**HTML**
---------------------------------
&#9733; is for solid star
&#9734; is for empty and outlined star

* If you are using Twitter Bootstrap, it is recommended to add class `d-inline-block` 
   to <div> with class `rating-stars`, it will quite likely save you from further headaches
* If not using Twitter Bootstrap, you can add style attribute:
   <div class="rating-stars" style="display: inline-block!important;">
-->
<div class="rating-stars">
  <div class="rating-stars-top" style="width: 87.13%"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
  <div class="rating-stars-bottom"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
</div>
// **CSS**
// ---------------------------------
// https://codepen.io/Bluetidepro/pen/GkpEa
// the code given here is slightly modified than the code available on above link
.rating-stars {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 1rem;
  height: 1rem; // it is recommended that font-size and height is equal
  width: 5rem;
  /* width needs to be 5 times font-size so that each star correspond to 20% 
    |   this is not case in original Pen on CodePen which leads to slightly inaccurate
        filling of stars than specified in percentages
  */
  margin: 0;
  position: relative;
  padding: 0;
  overflow-wrap: normal;

  &-top {
    color: #fbbc05;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  &-bottom {
    padding: 0;
    display: block;
    z-index: 0;
  }
}

Hope it helps!

Sanmay Joshi 70
add comment

Your Answer