Creating a star rating application using html and css

Creating a star rating application using html and css

6 min. read

HTML markup

<!DOCTYPE html>
<html>

<head>
	<title>Star rating application</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div id="cover">
	<h1>Star rating application</h1>
	<div id="stars">
		<input type="radio" name="rating" class="rb" id="_5">
		<i class="fa fa-star" aria-hidden="true"></i>  <!-- First star -->

		<input type="radio" name="rating" class="rb" id="_4">
		<i class="fa fa-star" aria-hidden="true"></i>

		<input type="radio" name="rating" class="rb" id="_3">
		<i class="fa fa-star" aria-hidden="true"></i>

		<input type="radio" name="rating" class="rb" id="_2">
		<i class="fa fa-star" aria-hidden="true"></i>

		<input type="radio" name="rating" class="rb" id="_1">
		<i class="fa fa-star" aria-hidden="true"></i>
	</div>
</div>
</body>

</html>

CSS rules

Applying some basic css

body
{
	margin:0px;
	font-family:Helvetica,sans-serif,arial;
	color:#fff;
	background-color:#000;
}

#cover
{
	width:400px;
	margin:0px auto;
	padding:60px 0px;
	text-align:center;
}

#stars
{
	width:250px;
	margin:0 auto;
	position:relative;
}

Floating the stars ( .fa elements ) to right.

Why floating to right?

That is because when there is hover on any star, then all it's left side stars should have the same color ( in our case yellow ).

In order to achieve this we will be using general sibling combinator ( ~ ).

Click here to read more about General sibling combinator

The general sibling combinator selects all the element(s) selected by css selector on right side of ~ that are siblings of element(s) selected by css selector on left side of ~, if the elements selected by selectors on left and right of ~ have the same parent.

So using above combinator, when there is hover on first star ( see the HTML code ) then we can target all the four other stars as they are siblings of the first one, and this is the similar case with every star eg. hovering on second .fa element ( star ) will target it's next three stars.

So the first star in our html should be on rightmost side because when we hover on it then it's next four sibling stars will be targeted and we will change their color to yellow. ( In other words first star in our html code acts as hightest rating ie. 5, so should be placed on rightmost position , second star acts as rating 4 so should be placed on second last position and similarly other stars ), and this can be done by floating all the stars to the right.

#stars:after
{
	content:"";
	clear:both;
	display:block;
	height:0px;
	visibility:hidden;
}

.fa
{
	display:block;
	float:right;
	font-size: 30px;
	color: #fff;
	width: 30px;
	height: 30px;
	padding: 10px;
	transition:0.2s ease color;
}

See result in the fiddle below

Placing radio buttons above on their corresponding stars and making them invisible.

First radio button on above the rightmost star icon ( ie. first star ).
Second radio button on above second last star icon ( ie. second star ).
Similarly other radio buttons are placed.

To hide the radio button opacity : 0 is applied to them.

.rb
{
	width: 50px;
	height: 50px;
	margin: 0px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index:1
}

#_1
{
	right:200px;
}

#_2
{
	right:150px;
}

#_3
{
	right:100px;
}

#_4
{
	right:50px;
}

#_5
{
	right:0px;
}

See result in the fiddle below

Main part of css

Make every star upto selected star yellow colored.

.rb:checked ~ i
{
	color:#FFEB3B;
}

Make every star upto hovered star red colored.

.rb:hover ~ i
{
	color:#F44336;
}

When there is hover on right side of selected star, keep the selected star and stars on left side of it yellow colored.

.rb:hover ~ .rb:checked ~ i
{
	color:#FFEB3B;
}

When a star is selected, then make it and all stars left side of it yellow colored. (Below css also keeps the selected star always yellow even on hover)

.rb:checked:hover ~ i
{
	color:#FFEB3B;
}

Change cursor appearance when there is hover on selected star

.rb:checked:hover
{
	cursor:default;
}

When there is hover on left side of selected star then make the hovered star and stars on left side of it green colored.

.rb:checked ~ .rb:hover ~ i
{
	color:#3b3;
}

See final result in the fiddle below

You can place div#cover element inside <form method="post" action="url of webpage to fetch rating"> & </form> tags to send rating to server.

Using PHP rating could be retrieved as -

$user_rating = $_POST['rating']; // "rating" is the name of radio buttons
Write comments