Pure CSS Star Rating Using Radio Buttons

Pure CSS Star Rating Using Radio Buttons

The CSS Star Rating is one particular classic UX patterns that every web designer has tinkered with at one time or another. I had formed an idea get the UX part of it done with using pure CSS.

I will try to make this rating system using radio buttons and also will show pure Unicode entity HTML rating.

There are tons of jQuery plugins and necessary JavaScript code that will help you create rating stars. The reason why because it’s all written in JavaScript is that whenever a dependence on such a rating system first arose CSS lacked the capability to do things like this.

As I said above, this star rating component built-in with purely CSS, so it doesn’t mean that it will not work on click. It will still work on-click and update the value to match.

It supports hovering over the star, and it will change a color of stars when you hover. When you click the stars it will keep that value or update the rating.

That is a very straightforward and quick tutorial about making rating radio buttons. We are planning to use HTML form tag, radio input type buttons and used different colored stars plus some simple CSS logic to create the ratings.

How to Make Star Rating Using Radio Buttons

The simplest way of making star rating, We can use Unicode object for stars (☆) right in it. You should have UTF-8 charset that should not be a big deal but if some reason you don’t have UTF-8 Charset, you can be used. You can use as many stars as you want. Let’s see HTML markup.

<div class="rating">
	<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

There is absolutely no way to choose another child component. However, there’s a real way to choose succeeding child elements, through the next or general sibling combinators.

If we change the order of the characters actually, then we can use the overall sibling combinator to choose all the actors that appear prior to the hovered star aesthetically, but following the hovered star in the HTML.

The CSS

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "05";
   position: absolute;
   left: 0;
   color: gold;
}

Next, we need to change the star into “solid” star on hover (Finding those sorts of characters). An easy way, Just need to add the pseudo element \2605 of a solid star (★) over it on :hover. That’s whole star rating pattern. Here’s is complete CSS code to make it work:

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "05";
   position: absolute;
   left: 0;
   color: gold;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}

Source code taken from CSS Tricks

Using Radio Buttons

Using Radio buttons is another method of creating the rating. When we search out on google for radio buttons method, we find this post to make radio buttons as the stars.

This method we need to define HTML form element and then each star will be radio button. We also need to set the label for each star.

When we click on that label, It will make a radio button to get checked. We are using these label as the stars so click on a star would result in the selecting radio button.

<form>
  <fieldset>
    <span class="star-cb-group">
      <input type="radio" id="rating-5" name="rating" value="5" />
      <label for="rating-5">5</label>
      <input type="radio" id="rating-4" name="rating" value="4" checked="checked" />
      <label for="rating-4">4</label>
      <input type="radio" id="rating-3" name="rating" value="3" />
      <label for="rating-3">3</label>
      <input type="radio" id="rating-2" name="rating" value="2" />
      <label for="rating-2">2</label>
      <input type="radio" id="rating-1" name="rating" value="1" />
      <label for="rating-1">1</label>
      <input type="radio" id="rating-0" name="rating" value="0" class="star-cb-clear" />
      <label for="rating-0">0</label>
    </span>
  </fieldset>
</form>

And the CSS code where we hide radio buttons while keeping labels

.star-cb-group {
  /* remove inline-block whitespace */
  font-size: 0;
  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  /* the hidden clearer */
}
.star-cb-group * {
  font-size: 1rem;
}
.star-cb-group > input {
  display: none;
}
.star-cb-group > input + label {
  /* only enough room for the star */
  display: inline-block;
  overflow: hidden;
  text-indent: 9999px;
  width: 1em;
  white-space: nowrap;
  cursor: pointer;
}
.star-cb-group > input + label:before {
  display: inline-block;
  text-indent: -9999px;
  content: "☆";
  color: #888;
}
.star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
  content: "★";
  color: #e52;
  text-shadow: 0 0 1px #333;
}
.star-cb-group > .star-cb-clear + label {
  text-indent: -9999px;
  width: .5em;
  margin-left: -.5em;
}
.star-cb-group > .star-cb-clear + label:before {
  width: .5em;
}
.star-cb-group:hover > input + label:before {
  content: "☆";
  color: #888;
  text-shadow: none;
}
.star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
  content: "★";
  color: #e52;
  text-shadow: 0 0 1px #333;
}

That’s a wrap! It’s work with modern browsers. For Older browser version, e.g., IE7 & IE8 you will to provide fallback or use Javascript solution.

I hope you like this and find it useful for your projects. You can view a demo and download the source. If you have any question feedback or comments, please feel free to post below.

Code ExamplesYou May Also Like