5 Star Rating With Only HTML & CSS

April 16, 2020

When setting up this blog, I went on a quick search for a five start rating component. I was thrilled to find this simple, HTML/CSS only method on code pen.

CSS

I used the compiled CSS. I needed to comment out the font-size to get the star rating to work right in my site.


.star-ratings-css {
	font-family: 'Open Sans', sans-serif;
	unicode-bidi: bidi-override;
	color: #c5c5c5;
	//font-size: 25px;
	height: 25px;
	width: 100px;
	margin: 0;
	position: relative;
	padding: 0;
	text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css-top {
	color: #e7711b;
	padding: 0;
	position: absolute;
	z-index: 1;
	display: block;
	top: 0;
	left: 0;
	overflow: hidden;
}
.star-ratings-css-bottom {
	padding: 0;
	display: block;
	z-index: 0;
}

HTML

I am using CraftCMS with this blog, and therefore using Twig. I am also using Zurb Foundation CSS and Tailwind CSS for styling. Only the Tailwind styling is apparent here. Here is the HTML/Twig

<div class="star-ratings-css tw-mb-3">
  <div class="star-ratings-css-top" style="width: {{ entry.bookReviewStarRating }}%">
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
  </div>
  <div class="star-ratings-css-bottom">
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
  </div>
</div>
Personal Updates

This is a password protected section available to those who know me in some fashion. If you know me and you do not already have a login, you can request a login here.

Personal Updates
Book Reviews

I am nuts about books. I read on all kinds of topics. I attempt to review each book I read for the sake of my own enrichment as well as conversation starters with others.

My Book Reviews
Pastoral Ministry

God has called me to be a pastor, and occasionally I have some pastoral thoughts I like to share.

Pastoral Posts
The Attic

You never know what you will find in an attic! Usually there is a hodgepodge of things buried under dust.

Explore the Attic
Technology

Most of what is included here are notes to myself. The majority of folks will not find interest in these posts.

Technology Posts