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
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 tried to get font awesome to work in my css file but nothing is working. Do i need to link a certain website to my html for the css "content" to work?
here is a code pen with the html and css.
https://codepen.io/anon/pen/XwbxbG
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4.5" /><label class="half" for="star4half" title="4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3.5" /><label class="half" for="star3half" title="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.5" /><label class="half" for="star2half" title="2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1.5" /><label class="half" for="star1half" title="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=".5" /><label class="half" for="starhalf" title="0.5 stars"></label>
</fieldset>
fieldset, label { margin: 0; padding: 0; }
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label { color: #FFD700; }
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
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>
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>
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>