Make simple star rating by radio buttons using css

This is a very quick and simple tutorial on how to make star ratings very easily. We just need a css sprite image containing 3 different colored stars, radio buttons and some simple logic to design the css. Lets’s look at the code now.

html file:

<form id="ratingsForm">
	<div class="stars">
		<input type="radio" name="star" class="star-1" id="star-1" />
		<label class="star-1" for="star-1">1</label>
		<input type="radio" name="star" class="star-2" id="star-2" />
		<label class="star-2" for="star-2">2</label>
		<input type="radio" name="star" class="star-3" id="star-3" />
		<label class="star-3" for="star-3">3</label>
		<input type="radio" name="star" class="star-4" id="star-4" />
		<label class="star-4" for="star-4">4</label>
		<input type="radio" name="star" class="star-5" id="star-5" />
		<label class="star-5" for="star-5">5</label>
		<span></span>
	</div>
</form>

We are hiding the default radio buttons and using some labels for existence of the radios. There is an empty span tag also which will be used to display the stars.

css file:

form .stars {
  background: url("stars.png") repeat-x 0 0;
  width: 150px;
  margin: 0 auto;
}

form .stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
  width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
  width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
  width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
  width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
  width: 20%;
}
form .stars label {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0!important;
  padding: 0!important;
  text-indent: -999em;
  float: left;
  position: relative;
  z-index: 10;
  background: transparent!important;
  cursor: pointer;
}
form .stars label:hover ~ span {
  background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
  width: 100% !important;
}
form .stars label.star-4:hover ~ span {
  width: 80% !important;
}
form .stars label.star-3:hover ~ span {
  width: 60% !important;
}
form .stars label.star-2:hover ~ span {
  width: 40% !important;
}
form .stars label.star-1:hover ~ span {
  width: 20% !important;
}
form .stars span {
  display: block;
  width: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  background: url("stars.png") repeat-x 0 -60px;
  -webkit-transition: -webkit-width 0.5s;
  -moz-transition: -moz-width 0.5s;
  -ms-transition: -ms-width 0.5s;
  -o-transition: -o-width 0.5s;
  transition: width 0.5s;
}

Just changing the width of the span tag according to the hover and checked state of the radio buttons. And also the background position is being changed (so that the sprite can display the right image.

The demo and source code is provided below. You can directly download and use it in your project.
live-demo-button download-button

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Thanks for the great tutorial, made it work with some changes to function with Gravity Forms. One issue, it doesn’t work well on mobile (iOS) with the blue star hover. I changed that to make the gold star on the input[type=”radio”] be the hover, then it works on mobile fine. Brilliant idea, thanks for sharing!

  • Very nice! I’m currently attempting to find an easy way for this to work for multiple ratings on the same page — If I find a solution, I’ll add it here.

    • Soni Pandey

      I am doing multiple rating on same page but it’s not working for me. Can you please help me out.

      Thanks

    • metalshan

      You need to modify the :checked behavior. Either use different classes or ids; or you can handle this part using script.

    • Soni Pandey

      Yes, I have done. Thanks

    • jorge vasquez

      Hi can you share your solution please,
      Thank you

  • TCURT15

    On iOS the stars don’t seem to stay clicked whenever I click on something else in my form. Any solutions?

    • metalshan

      Well, what’s happening is as mobile considered the first click as hover and clicking anywhere outside the element as hover out, Thus after clicking it’s assigning the css for hover and after clicking outside it’s removing the hover css.
      For a fix you can give the hover and the click image same color. Currently one is blue and another is golden.

      For efficient fix you should prevent the loading of hover specific css and also change the image while loading in mobile.

  • Aaran Fraser-Hitchen

    This is absolutely brilliant! Easy to implement and it works very nicely. Thank you 🙂

  • Gordon

    Great work. Thanks a bunch.

  • Alex

    how can we add some spece between the stars?

  • dechoiliev

    Thanks.

  • Hi Paul, Great work!
    This looks to be a great star ratings solution for a feedback form.
    I just wanted to ask, how can you display the value of the stars chosen (such as four stars) and have that value displayed inside the form?

    At the moment my customer review form uses radio buttons and the __(‘1 star’) ?> string to pass the number to the form, as shown here:

     
    __(‘1 star’) ?>
    __(‘2 stars’) ?>
    __(‘3 stars’) ?>
    __(‘4 stars’) ?>
    __(‘5 stars’) ?>

    getRatings() as $_rating): ?>

    How can I do the same with the stars?

    Many thanks!

    • Paul Shan

      Sorry for late reply @granty2016:disqus . Wasn’t much involved in voidcanvas for months.
      How about a simple on-click event listener for this problem?

    • Akash PJ

      hello sir myself Akash Pj i have downloaded and used above code , and integrated in source code in my project but star.png consists 3 stars(gray,yellow,and blue). in my form 3 stars displaying 3 times what is the mistake please replay

    • Paul Shan

      Create a fiddle in jsfiddle or jsbin and share the code.

    • Akash PJ

      hi
      good morning sir,
      I am working on a project
      There is a web form where data is input.
      Once done & clicked on save button the input data/content needs to be saved as a dat/text file in a specific folder.
      Please suggest how to achieve the same.

  • Akash PJ

    how to get the star value and store after selecting the star???

    • Paul Shan

      You need to add onClick listeners in your JS code for those elements.

  • Paul Shan

    Create a fiddle in jsfiddle or jsbin and share the code.
    You have multiple elements with same id in the code you shared, correct that.

  • labee singh

    it’s working great when we have single item for rating but if we have more than 1 item for rating it’s changes other item’s rating as well can you suggest how can I implement this feature using script

    1

    2

    3

    4

    5

    1

    2

    3

    4

    5