Simple CSS Star Rating plugin

Simple CSS Star Rating plugin

Today, We want to share with you Simple CSS Star Rating plugin.In this post we will show you bootstrap star rating font awesome, hear for star rating in javascript source code we will give you demo and example for implement.In this post, we will learn about Simple jQuery Star Rating System For Bootstrap 3/4 with an example.

Simple CSS Star Rating plugin

There are the Following The simple About Simple CSS Star Rating plugin Full Information With Example and source code.

  PHP Array Remove specific value Example

As I will cover this Post with live Working example to develop bootstrap star rating example code, so the Star Ratings With Very Little CSS for this example is following below.

Pure CSS Star Rating Widget

index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	
	<title>Star star-plugins : star rating using pure css</title>
	
	<style>
.star-plugin {
    float:left;
}
.star-plugin:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.star-plugin:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.star-plugin:not(:checked) > label:before {
    content: '★ ';
}

.star-plugin > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.star-plugin:not(:checked) > label:hover,
.star-plugin:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.star-plugin > input:checked + label:hover,
.star-plugin > input:checked + label:hover ~ label,
.star-plugin > input:checked ~ label:hover,
.star-plugin > input:checked ~ label:hover ~ label,
.star-plugin > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.star-plugin > label:active {
    position:relative;
    top:2px;
    left:2px;
}
	</style>
</head>

<body>
  <fieldset class="star-plugin">
    <legend>Please Submit rate:</legend>
    <input type="radio" id="rating5" name="star-plugin" value="5" /><label for="rating5" title="Rocks!">5 stars</label>
    <input type="radio" id="rating4" name="star-plugin" value="4" /><label for="rating4" title="Pretty good">4 stars</label>
    <input type="radio" id="rating3" name="star-plugin" value="3" /><label for="rating3" title="Meh">3 stars</label>
    <input type="radio" id="rating2" name="star-plugin" value="2" /><label for="rating2" title="Kinda bad">2 stars</label>
    <input type="radio" id="rating1" name="star-plugin" value="1" /><label for="rating1" title="Sucks big time">1 star</label>
</fieldset>
  
</body>

</html>

Web Programming Tutorials Example with Demo

Read :

  5 Star Product Rating Review Widget in CSS

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple CSS Star Rating plugin.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of