marvillous marvillous - 1 month ago 12
CSS Question

CSS > Font-awesome multi star rating

I am using this example to provide rating in my page for multi-sections

https://codepen.io/anon/pen/KgLomj

My problem is that when I set the first group of start it affects other groups; I just want to know how to made each one works independently.

<input type="radio" id="star5" name="rating" value="5" checked/>
<label class = "full" for="star5" title="Awesome - 5 stars"></label>


But currently when I set each input to "checked" it affects other groups of stars.

Any ideas?

Answer

The problem is your input name is same for all both group. change all input name for all group set.

the HTML

<h1>Pure CSS Star Rating Widget 1</h1>
<fieldset class="rating">
    <input type="radio" id="star5a" name="ratinga" value="5" checked/><label class = "full" for="star5a" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4halfa" name="ratinga" value="4 and a half" /><label class="half" for="star4halfa" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4a" name="ratinga" value="4" /><label class = "full" for="star4a" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3halfa" name="ratinga" value="3 and a half" /><label class="half" for="star3halfa" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3a" name="ratinga" value="3" /><label class = "full" for="star3a" title="Meh - 3 stars"></label>
    <input type="radio" id="star2halfa" name="ratinga" value="2 and a half" /><label class="half" for="star2halfa" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2a" name="ratinga" value="2" /><label class = "full" for="star2a" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1halfa" name="ratinga" value="1 and a half" /><label class="half" for="star1halfa" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1a" name="ratinga" value="1" /><label class = "full" for="star1a" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalfa" name="ratinga" value="half" /><label class="half" for="starhalfa" title="Sucks big time - 0.5 stars"></label>
</fieldset>

<div> <br><br><br><div>
<h1>Pure CSS Star Rating Widget 2</h1>
<fieldset class="rating">
    <input type="radio" id="star5b" name="ratings" value="5" /><label class = "full" for="star5b" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4halfb" name="ratings" value="4 and a half" /><label class="half" for="star4halfb" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4b" name="ratings" value="4" /><label class = "full" for="star4b" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3halfb" name="ratings" value="3 and a half" /><label class="half" for="star3halfb" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3b" name="ratings" value="3" checked/><label class = "full" for="star3b" title="Meh - 3 stars"></label>
    <input type="radio" id="star2halfb" name="ratings" value="2 and a half" /><label class="half" for="star2halfb" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2b" name="ratings" value="2" /><label class = "full" for="star2b" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1halfb" name="ratings" value="1 and a half" /><label class="half" for="star1halfb" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1b" name="ratings" value="1" /><label class = "full" for="star1b" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalfb" name="ratings" value="half" /><label class="half" for="starhalfb" title="Sucks big time - 0.5 stars"></label>
</fieldset>

the CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
Comments