NiceSnippets.com
Pure CSS Star Rating Demo With Bootstrap 4
We are giving you pure css star rating example with bootstrap 4. In this rating system you also select half star rating. when you hover on star then display tooltip. this radio star rating example. this is light weight css star rating system. you can simply copy past in your project.
We allows to free snippets of css star rating display , you can download full code of css star rating radio buttons layout. Here in this post i will give you example of bootstrap star rating css snippet and you will get simple code of html, css and jquery. In half star rating css snippet i give you three tab with html, css and js, you can easily get code of star rating widget layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Star Rating</title>
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-8 col-12 main-section text-center">
<h2 class="hedding pt-3 text-white p-5">Pure CSS Star <strong>Rating</strong></h2>
<fieldset class="rating-star text-center pl-5 pb-5">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
</div>
</div>
</body>
</html>
body{
background-color: #FFB85F;
}
.main-section{
position: relative;
top:50%;
left:50%;
right: 50%;
box-shadow: 1px 1px 15px #FF6EB0;
font-family: 'Abel', sans-serif;
background-color: #E45641;
transform: translate(-50%,50%);
}
.rating-star{
position: relative;
left:50%;
right:50%;
transform: translate(-75%,0%);
}
.rating-star > input { display: none; }
.rating-star > label:before {
margin: 5px;
font-size:30px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating-star > .half:before {
content: "\f089";
position: absolute;
}
.rating-star > label {
color: #ddd;
float: right;
}
.rating-star > input:checked ~ label,
.rating-star:not(:checked) > label:hover,
.rating-star:not(:checked) > label:hover ~ label { color: #FFD700; }
.rating-star > input:checked + label:hover,
.rating-star > input:checked ~ label:hover,
.rating-star > label:hover ~ input:checked ~ label,
.rating-star > input:checked ~ label:hover ~ label { color: #FFED85; }
