Live Demo - Pure CSS Star Rating Demo With Bootstrap 4

See Free Live Demo example of 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...

<!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;  }