I've got the following issue, with a star rating css example. It's not working when more then one fieldset is added.
fieldset.star {
box-sizing:border-box;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
position:relative;
margin: 10px auto 10px auto;
}
fieldset.star.star5 > label:nth-of-type(even){
display:none;
}
fieldset.star > input[type="radio"] {
display: none;
}
fieldset.star > label {
display:inline-block;
float:right;
color:rgba(255,255,255,.5);
}
fieldset.star > label:before {
display: inline-block;
font-size: 4rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: FontAwesome;
content: "\f005 "; /* full star */
}
fieldset.star .half{
color:rgba(255,255,255,.1);
}
fieldset.star .half:before {
content: "\f089 "; /* half star no outline */
position: absolute;
padding-right: 0;
}
/* Click + hover color */
fieldset.star > input:checked ~ label, /* color current and previous stars on checked */
fieldset.star > label:hover,
fieldset.star > label:hover ~ label {
color: #DDBB00;
} /* color previous stars on hover */
/* Hover highlights */
fieldset.star > input:checked + label:hover,
fieldset.star > input:checked ~ label:hover, /* highlight current and previous stars */
fieldset.star > input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
fieldset.star > label:hover ~ input:checked ~ label /* highlight previous selected stars */ {
color: #FFD700;
}
<fieldset class="star">
<input type="radio" id="rating10" name="answer" value="10"><label for="rating10"></label>
<input type="radio" id="rating9" name="answer" value="9"><label class="half" for="rating9"></label>
<input type="radio" id="rating8" name="answer" value="8"><label for="rating8"></label>
<input type="radio" id="rating7" name="answer" value="7"><label class="half" for="rating7"></label>
<input type="radio" id="rating6" name="answer" value="6"><label for="rating6"></label>
<input type="radio" id="rating5" name="answer" value="5"><label class="half" for="rating5"></label>
<input type="radio" id="rating4" name="answer" value="4"><label for="rating4"></label>
<input type="radio" id="rating3" name="answer" value="3"><label class="half" for="rating3"></label>
<input type="radio" id="rating2" name="answer" value="2"><label for="rating2"></label>
<input type="radio" id="rating1" name="answer" value="1"><label class="half" for="rating1"></label>
</fieldset>
<fieldset class="star">
<input type="radio" id="rating110" name="answer" value="10"><label for="rating110"></label>
<input type="radio" id="rating19" name="answer" value="9"><label class="half" for="rating19"></label>
<input type="radio" id="rating18" name="answer" value="8"><label for="rating18"></label>
<input type="radio" id="rating17" name="answer" value="7"><label class="half" for="rating17"></label>
<input type="radio" id="rating16" name="answer" value="6"><label for="rating16"></label>
<input type="radio" id="rating15" name="answer" value="5"><label class="half" for="rating15"></label>
<input type="radio" id="rating14" name="answer" value="4"><label for="rating14"></label>
<input type="radio" id="rating13" name="answer" value="3"><label class="half" for="rating13"></label>
<input type="radio" id="rating12" name="answer" value="2"><label for="rating12"></label>
<input type="radio" id="rating11" name="answer" value="1"><label class="half" for="rating11"></label>
</fieldset>
Combined with this css, it works great,but not when there are more of the same elements [fieldset]. I can't find the right answer for this, but I want this to work out properly. I know i can use javascript/jquery [plugins] for this but I want to use this css solution if it's possible
Does someome have some thoughts?
Each set of fieldsets should have a different name.
fieldset.star {
box-sizing: border-box;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
position: relative;
margin: 10px auto 10px auto;
}
fieldset.star.star5>label:nth-of-type(even) {
display: none;
}
fieldset.star>input[type="radio"] {
display: none;
}
fieldset.star>label {
display: inline-block;
float: right;
color: rgba(255, 255, 255, .5);
}
fieldset.star>label:before {
display: inline-block;
font-size: 4rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: FontAwesome;
content: "\f005 ";
/* full star */
}
fieldset.star .half {
color: rgba(255, 255, 255, .1);
}
fieldset.star .half:before {
content: "\f089 ";
/* half star no outline */
position: absolute;
padding-right: 0;
}
/* Click + hover color */
fieldset.star>input:checked~label,
/* color current and previous stars on checked */
fieldset.star>label:hover,
fieldset.star>label:hover~label {
color: #DDBB00;
}
/* color previous stars on hover */
/* Hover highlights */
fieldset.star>input:checked+label:hover,
fieldset.star>input:checked~label:hover,
/* highlight current and previous stars */
fieldset.star>input:checked~label:hover~label,
/* highlight previous selected stars for new rating */
fieldset.star>label:hover~input:checked~label
/* highlight previous selected stars */
{
color: #FFD700;
}
<fieldset class="star">
<input type="radio" id="rating10" name="answer" value="10"><label for="rating10"></label>
<input type="radio" id="rating9" name="answer" value="9"><label class="half" for="rating9"></label>
<input type="radio" id="rating8" name="answer" value="8"><label for="rating8"></label>
<input type="radio" id="rating7" name="answer" value="7"><label class="half" for="rating7"></label>
<input type="radio" id="rating6" name="answer" value="6"><label for="rating6"></label>
<input type="radio" id="rating5" name="answer" value="5"><label class="half" for="rating5"></label>
<input type="radio" id="rating4" name="answer" value="4"><label for="rating4"></label>
<input type="radio" id="rating3" name="answer" value="3"><label class="half" for="rating3"></label>
<input type="radio" id="rating2" name="answer" value="2"><label for="rating2"></label>
<input type="radio" id="rating1" name="answer" value="1"><label class="half" for="rating1"></label>
</fieldset>
<fieldset class="star">
<input type="radio" id="rating110" name="answer1" value="10"><label for="rating110"></label>
<input type="radio" id="rating19" name="answer1" value="9"><label class="half" for="rating19"></label>
<input type="radio" id="rating18" name="answer1" value="8"><label for="rating18"></label>
<input type="radio" id="rating17" name="answer1" value="7"><label class="half" for="rating17"></label>
<input type="radio" id="rating16" name="answer1" value="6"><label for="rating16"></label>
<input type="radio" id="rating15" name="answer1" value="5"><label class="half" for="rating15"></label>
<input type="radio" id="rating14" name="answer1" value="4"><label for="rating14"></label>
<input type="radio" id="rating13" name="answer1" value="3"><label class="half" for="rating13"></label>
<input type="radio" id="rating12" name="answer1" value="2"><label for="rating12"></label>
<input type="radio" id="rating11" name="answer1" value="1"><label class="half" for="rating11"></label>
</fieldset>
Related
Is it possible to achieve this with radio button labels and font awesome icons?
half star rating style I need
The most that I have managed to do is this, using two font awesome icons as radio button labels but I don't want unselected areas to be grey, rather empty star with border just like in the image above:
half star rating that I got
Here is my code:
.rate{
display: inline-block;
border: 0;
color: #b0afaf;
}
.rate > input{
display: none;
}
.rate > label {
float: right;
}
.rate > label:before {
display: inline-block;
font-size: 1.1rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: FontAwesome;
content: "\f005 ";
}
.rate .half:before {
content: "\f089 ";
position: absolute;
padding-right: 0;
}
input:checked ~ label,
label:hover, label:hover ~ label {
color: #dbc00b;
}
input:checked + label:hover, input:checked ~ label:hover,
input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label {
color: #f2ec35;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="rate">
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="Awesome"></label>
<input type="radio" id="star4.5" name="rating" value="4.5" />
<label for="star4.5" class="half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4"></label>
<input type="radio" id="star3.5" name="rating" value="3.5" />
<label for="star3.5" class="half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3"></label>
<input type="radio" id="star2.5" name="rating" value="2.5" />
<label for="star2.5" class="half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2"></label>
<input type="radio" id="star1.5" name="rating" value="1.5" />
<label for="star1.5" class="half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1"></label>
<input type="radio" id="star0.5" name="rating" value="0.5" />
<label for="star0.5" class="half"></label>
</div>
I have few films (for example) on one page. And I have to be able to rate them with pure css stars. The code I have can do it with only first rating, after selecting second - first rating resetting.
You can see it in code below:
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.card input {
display: none;
}
.card label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.card label {
color: #ddd;
float: right;
}
fieldset {
border: none;
margin: 0;
padding: 0;
/*float: left;*/
}
fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
color: #FFD700;
}
fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
color: #FFED85;
}
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-1">
<input type="radio" name="stars" id="star-1" value="1">
<label for="star-1"></label>
<input type="radio" name="stars" id="star-2" value="2">
<label for="star-2"></label>
<input type="radio" name="stars" id="star-3" value="3">
<label for="star-3"></label>
<input type="radio" name="stars" id="star-4" value="4">
<label for="star-4"></label>
<input type="radio" name="stars" id="star-5" value="5">
<label for="star-5"></label>
</fieldset>
//...
</div>
</div>
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-2">
<input type="radio" name="stars" id="star-6" value="1">
<label for="star-6"></label>
<input type="radio" name="stars" id="star-7" value="2">
<label for="star-7"></label>
<input type="radio" name="stars" id="star-8" value="3">
<label for="star-8"></label>
<input type="radio" name="stars" id="star-9" value="4">
<label for="star-9"></label>
<input type="radio" name="stars" id="star-10" value="5">
<label for="star-10"></label>
</fieldset>
//...
</div>
</div>
How to make them work separate?
I will appreciate all kinds of support.
Waiting for your help, friends.
You have to use the different name for the second radiobuttons set.
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.card input {
display: none;
}
.card label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.card label {
color: #ddd;
float: right;
}
fieldset {
border: none;
margin: 0;
padding: 0;
/*float: left;*/
}
fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
color: #FFD700;
}
fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
color: #FFED85;
}
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-1">
<input type="radio" name="stars" id="star-1" value="1">
<label for="star-1"></label>
<input type="radio" name="stars" id="star-2" value="2">
<label for="star-2"></label>
<input type="radio" name="stars" id="star-3" value="3">
<label for="star-3"></label>
<input type="radio" name="stars" id="star-4" value="4">
<label for="star-4"></label>
<input type="radio" name="stars" id="star-5" value="5">
<label for="star-5"></label>
</fieldset>
//...
</div>
</div>
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-2">
<input type="radio" name="stars_1" id="star-6" value="1">
<label for="star-6"></label>
<input type="radio" name="stars_1" id="star-7" value="2">
<label for="star-7"></label>
<input type="radio" name="stars_1" id="star-8" value="3">
<label for="star-8"></label>
<input type="radio" name="stars_1" id="star-9" value="4">
<label for="star-9"></label>
<input type="radio" name="stars_1" id="star-10" value="5">
<label for="star-10"></label>
</fieldset>
//...
</div>
</div>
This question already has answers here:
star rating html, css
(2 answers)
Closed 2 years ago.
so I have these radio buttons that form a star-rating component in reactjs, when I hover over the stars they paint in yellow but when I click in one of them and hover out of the stars the color doesn't stay and the gray color come back in all of them.
Here is the js file:
render(){
return (
<div className="star-rating">
<input id="star-5" type="radio" name="rating" value="star-5"></input>
<label for="star-5" title="5 stars">
<i className="active fa fa-star" aria-hidden="true"></i>
</label>
<input id="star-4" type="radio" name="rating" value="star-4"></input>
<label for="star-4" title="4 stars">
<i className="active fa fa-star" aria-hidden="true"></i>
</label>
<input id="star-3" type="radio" name="rating" value="star-3"></input>
<label for="star-3" title="3 stars">
<i className="active fa fa-star" aria-hidden="true"></i>
</label>
<input id="star-2" type="radio" name="rating" value="star-2"></input>
<label for="star-2" title="2 stars">
<i className="active fa fa-star" aria-hidden="true"></i>
</label>
<input id="star-1" type="radio" name="rating" value="star-1"></input>
<label for="star-1" title="1 star">
<i className="active fa fa-star" aria-hidden="true"></i>
</label>
</div>
);
}
and the css:
.star-rating {
direction: rtl;
display: inline-block;
padding: 20px
}
.star-rating input[type=radio] {
display: none
}
.star-rating label {
color: #bbb;
font-size: 50px;
padding: 0;
cursor: pointer;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input[type=radio]:checked ~ label {
color: #f2b600
}
Any help?
try this from James Barnett
#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; }
<fieldset class="rating">
<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>
I am trying to build a simple rating system using HTML and CSS. It's a very simple rating bar which consist of 5 stars.
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.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;
}
.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;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="star5" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
The problem is that I can only select the star up to 4.5 star which is half of the 5th star, what I want is to select the full 5 star. I have included an image of the rating bar below. Help is really appreciated.
Rating bar
Just a typo- needed to change star5 to 5star:
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.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;
}
.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;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
I have a star system made with html and css only.
My issue is that when I change the rating of the second system the first one changes too. I tried to use different class names but apparently I am missing something. Any suggestions?
HTML
<div style="padding-top:20px;" class="row">
<div style="border-right: solid #4a98b5; width:290px;" class="col-
md-4"><p>Product Matches description</p></div>
<div style="font-size:20px;color:#FFD700" class="col-md-4">
<fieldset class="rating1">
<input type="radio" id="star5" name="rating1" value="5" /><label class = "full" for="star5" ></label>
<input type="radio" id="star4half" name="rating1" value="4.5" /><label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating1" value="4" /><label class = "full" for="star4"></label>
<input type="radio" id="star3half" name="rating1" value="3.5" /><label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating1" value="3" /><label class = "full" for="star3"></label>
<input type="radio" id="star2half" name="rating1" value="2.5" /><label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating1" value="2" /><label class = "full" for="star2"></label>
<input type="radio" id="star1half" name="rating1" value="1.5" /><label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating1" value="1" /><label class = "full" for="star1"></label>
<input type="radio" id="starhalf" name="rating1" value="0.5" /><label class="half" for="starhalf"></label>
</fieldset>
</div>
</div>
<div style="padding-top:20px;" class="row">
<div style="border-right: solid #4a98b5; width:290px;" class="col-
md-4"><p>Rate your experience</p></div>
<div style="font-size:20px;color:#FFD700" class="col-md-4">
<fieldset class="rating2">
<input type="radio" id="star5" name="rating2" value="5" /><label class = "full" for="star5" ></label>
<input type="radio" id="star4half" name="rating2" value="4.5" /><label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating2" value="4" /><label class = "full" for="star4"></label>
<input type="radio" id="star3half" name="rating2" value="3.5" /><label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating2" value="3" /><label class = "full" for="star3"></label>
<input type="radio" id="star2half" name="rating2" value="2.5" /><label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating2" value="2" /><label class = "full" for="star2"></label>
<input type="radio" id="star1half" name="rating2" value="1.5" /><label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating2" value="1" /><label class = "full" for="star1"></label>
<input type="radio" id="starhalf" name="rating2" value="0.5" /><label class="half" for="starhalf"></label>
</fieldset>
</div>
CSS
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.rating1 {
border: none;
float: left;
}
.rating1 > input { display: none; }
.rating1 > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating1 > .half:before {
content: "\f089";
position: absolute;
}
.rating1 > label {
color: #ddd;
float: right;
}
.rating1 > input:checked ~ label, /* show gold star when clicked */
.rating1:not(:checked) > label:hover, /* hover current star */
.rating1:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating1 > input:checked + label:hover, /* hover current star when
changing rating */
.rating1 > input:checked ~ label:hover,
.rating1 > label:hover ~ input:checked ~ label, /* lighten current
selection */
.rating1 > input:checked ~ label:hover ~ label { color: #FFED85; }
.rating2 {
border: none;
float: left;
}
.rating2 > input { display: none; }
.rating2 > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating2 > .half:before {
content: "\f089";
position: absolute;
}
.rating2 > label {
color: #ddd;
float: right;
}
.rating2 > input:checked ~ label, /* show gold star when clicked */
.rating2:not(:checked) > label:hover, /* hover current star */
.rating2:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating2 > input:checked + label:hover, /* hover current star when changing rating */
.rating2 > input:checked ~ label:hover,
.rating2 > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating2 > input:checked ~ label:hover ~ label { color: #FFED85; }
Please have a look https://codepen.io/anon/pen/weYbzZ for the code.
Problem Solved!
Although the fieldsets have different class names, the input fields have the same names, hence when the second input field changes, it changes the first one. So different id names on the input fields solves the issue