Integrating CSS Star Rating into an HTML Form

Integrating CSS star rating into an HTML form

This is very easy to use, just copy-paste the code. You can use your own star image in background.

I have created a variable var userRating. you can use this variable to get value from stars.

Enjoy!! :)

$(document).ready(function(){    // Check Radio-box    $(".rating input:radio").attr("checked", false);
    $('.rating input').click(function () {        $(".rating span").removeClass('checked');        $(this).parent().addClass('checked');    });
    $('input:radio').change(      function(){        var userRating = this.value;        alert(userRating);    }); });

.rating {    float:left;    width:300px;}.rating span { float:right; position:relative; }.rating span input {    position:absolute;    top:0px;    left:0px;    opacity:0;}.rating span label {    display:inline-block;    width:30px;    height:30px;    text-align:center;    color:#FFF;    background:#ccc;    font-size:30px;    margin-right:2px;    line-height:30px;    border-radius:50%;    -webkit-border-radius:50%;}.rating span:hover ~ span label,.rating span:hover label,.rating span.checked label,.rating span.checked ~ span label {    background:#F90;    color:#FFF;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="rating">    <span><input type="radio" name="rating" id="str5" value="5"><label for="str5"></label></span>    <span><input type="radio" name="rating" id="str4" value="4"><label for="str4"></label></span>    <span><input type="radio" name="rating" id="str3" value="3"><label for="str3"></label></span>    <span><input type="radio" name="rating" id="str2" value="2"><label for="str2"></label></span>    <span><input type="radio" name="rating" id="str1" value="1"><label for="str1"></label></span></div>

How to create rating system using only css

html code...

<div class="rate">
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
        </div>

css code...

  .rate{
        color:black;
        cursor:pointer;
    }
    .rate:hover{
        color:red;
    }
    .rate-item{
        float:left;
        cursor:pointer;
        margin:0px 15px 0px 15px;
    }
    .rate-item:hover ~ .rate-item {
        color: black;
    }

You can follow this example

http://jsfiddle.net/tanvir0604/JqKjL/1/

You can use fontawsome for better performance or just change the background image property besides the color property of my code.

Set star value in form after click on star

Use some js/jQuery to apply active class for current element, replace span with label and radio inside

$(document).ready(function() {  $('label').click(function() {    $('label').removeClass('active');    $(this).addClass('active');  });});

.rating {  unicode-bidi: bidi-override;  direction: rtl;  float: left;}.rating > label {  display: inline-block;  position: relative;  width: 1.1em;}.rating > label.active:before,.rating > label.active ~ label:before,.rating > label:hover:before,.rating > label:hover ~ label:before {  content: "\2605";  position: absolute;}input {  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form>  <div class="rating">    <label>☆      <input type="radio" name="starValue" value="5" />    </label>    <label>☆      <input type="radio" name="starValue" value="4" />    </label>    <label>☆      <input type="radio" name="starValue" value="3" />    </label>    <label>☆      <input type="radio" name="starValue" value="2" />    </label>    <label>☆      <input type="radio" name="starValue" value="1" />    </label>  </div></form>

Html/CSS Star Rating Feedback

hear is a working fiddle StarFiddle and you need to include

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

Single file do you want this.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Star</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.star-rating {
font-size: 0;
white-space: nowrap;
display: inline-block;
width: 250px;
height: 50px;
overflow: hidden;
position: relative;
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;
}
.star-rating i {
opacity: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20%;
z-index: 1;
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;
}
.star-rating input {
-moz-appearance: none;
-webkit-appearance: none;
opacity: 0;
display: inline-block;
width: 20%;
height: 100%;
margin: 0;
padding: 0;
z-index: 2;
position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
opacity: 1;
}
.star-rating i ~ i {
width: 40%;
}
.star-rating i ~ i ~ i {
width: 60%;
}
.star-rating i ~ i ~ i ~ i {
width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
width: 100%;
}
.choice {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
padding: 20px;
display: block;
}
*,
::after,
::before {
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
body::before {
height: 100%;
content: '';
width: 0;
background: red;
vertical-align: middle;
display: inline-block;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(':radio').change(
function(){
console.log(this.value);
$('.choice').text( this.value + ' stars' );
}
)
});//]]>
</script>
</head>
<body>
<span class="star-rating">
<input type="radio" name="rating" value="1"><i></i>
<input type="radio" name="rating" value="2"><i></i>
<input type="radio" name="rating" value="3"><i></i>
<input type="radio" name="rating" value="4"><i></i>
<input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>
</body>
</html>

CSS for 5 Star Rating System

You can do one thing. Create separate click and hover events for all the stars.
On click event of any star, it should change the color of the stars having lower value than that of clicked star and the star itself.
For example, if the star with value 3 is clicked, then it's click event must change the class of star 1,2 and 3 to 'active'.
Similarly, if star with value 5 is clicked, then it must change the class of stars 1,2,3,4,5 to 'active'.

Integrating CSS Star Rating into an HTML Form