I am using a star rating system for email templates. Some examples I found allow you to only select the rating, but I would like to hyperlink each star so that it takes you to a different link depending on the star that is clicked. Is this possible? I tried to hyperlink the entire input type but it removes the star icon.
Here is the CSS and HTML, as well as an example: https://jsfiddle.net/pz62gcq0/
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Star rating using pure CSS</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.rate {
border: 1px solid #cccccc;
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rate:not(:checked) > label:before {
content: '★ ';
}
.rate > input:checked ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}
</style>
<body>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" /><label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" /><label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" /><label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" /><label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" /><label for="star1" title="text">1 star</label>
</div>
</body>
</html>
You could try something like this: https://jsfiddle.net/v0qrgopz/1/
I've converted the inputs to links so that clicking on them takes you somewhere. I've used Flexbox to reverse the order of them so that the selector a:hover ~ a works.
You could use some inline JavaScript via the onclick event attribute. Inside each of your input tags include the attribute:
onclick="window.open('http://www.stackoverflow.com')"
Example: https://jsfiddle.net/KyleVassella/pz62gcq0/2/
Insert whatever link you like. This could also be done using a separate JS file if you don't want to use inline.
Related
I am currently making a Star Rating component for our website, I use angular11 (should not matter I think), so far I have the rendering of the 5 stars depending on the current rating value and such, but I struggle to get the styling for the hovering correct.
Basicly for example if I have 2 out of 5 stars and I hover the 4th star the 3th should be filled too.
I struggle to find the correct css to achieve that
Thats what I got so far in CSS
.rating-icon-empty { fill: #9e9e9e }
.rating-icon { fill: #7C4DFF; margin-right: 5px; }
.editable .rating-icon-empty:hover { fill: #7C4DFF; cursor: pointer;}
My current CSS only fills the star that is hovered but not the previous unfilled stars.
Is there a way to achieve this with pure CSS or do I need to rely on hover listeners for each star?
I had your problem before, read these:
First Solution:
#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; }
<h1>Pure CSS Star Rating Widget</h1>
<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>
Source:
https://codepen.io/jamesbarnett/pen/vlpkh
Second Solution:
body {
display: flex;
justify-content: center;
align-items: center;
}
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating>span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating>span:hover:before,
.rating>span:hover~span:before {
content: "\2605";
position: absolute;
}
<body>
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
</body>
Source:
https://css-tricks.com/star-ratings/
if you have any problems let me know.
I've a stars rating system and I want to put some legend on it (so it is not only the stars icons).
As I'm using Bootstrap4, I was thinking on using a row, and 2 cols to align them horizontally, however, my legend keeps getting some pixels above my stars.
I've also tried using margin-top: 10px on the legend, without the desired result.
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 col-lg-12">
<fieldset class="rating hidden text-center">
<legend>Califícanos: </legend>
<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.5"/><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.5"/><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.5"/><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.5"/><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="0.5"/><label class="half"
for="starhalf"
title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
</div>
https://codepen.io/anon/pen/GevVYZ
I've also tried using span tag:
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-lg-6">
<span class="calificanos-text hidden">Califícanos: </span>
</div>
<div class="col-md-6 col-lg-6">
<fieldset class="rating hidden text-center">
<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.5"/><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.5"/><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.5"/><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.5"/><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="0.5"/><label class="half"
for="starhalf"
title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
</div>
https://codepen.io/anon/pen/rRGBvB
This is what I see in my html (localhost):
What I see locally:
I wrapped them all in the div col6 and set them to display flex and then i removed the margin 5px in .rating > label:before
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/* NEW */
.col-md-6.col-lg-6 {
display: flex;
}
.rating > label:before {
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
/* END */
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 > .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;
}
<div class="row">
<div class="col-md-6 col-lg-6">
<span class="calificanos-text hidden">Califícanos: </span>
<fieldset class="rating hidden text-center">
<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.5"/><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.5"/><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.5"/><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.5"/><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="0.5"/><label class="half"
for="starhalf"
title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
</div>
So I found the following code on codepen (https://codepen.io/anon/pen/Edzxaj) to make a star rating, which works fine for Font Awesome 3.x and 4.x, but fails to produce the same result on 5.x when hovering over the stars.
/* Base setup */
#import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);
/* Ratings widget */
.rate {
display: inline-block;
border: 0;
}
/* Hide radio */
.rate > input {
display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
float: right;
}
/* The star of the show */
.rate > label:before {
display: inline-block;
font-size: 1.1rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005"; /* full star */
}
/* Half star trick */
.rate .half:before {
content: "\f089"; /* half star no outline */
position: absolute;
padding-right: 0;
}
/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100; } /* color previous stars on hover */
/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D; }
<fieldset class="rate">
<input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
<input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
<input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>
<input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
<input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>
<input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
<input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>
<input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
<input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>
<input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
</fieldset>
Using the previous version of font awesome, hovering over the second half of the star would fill the star. In 5.x you need to hover the cursor all the way to the end of the star before it gets filled (I know this sounds a bit vague, but just compare the codepen and this example to see the difference in hovering).
Is there any way to fix this?
I was able to solve this by "cutting" the star container in half. Extra space around the character was causing the hover to appear incorrectly large.
The catch is this requires setting a width which may or may not be a problem depending on your implementation.
.half Gets a width of roughly half the full star then overflow:hidden removes the extra half and margin-right moves the star back to the left. It's also using the full star icon for both displays so they line up better.
/* Base setup */
#import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);
/* Ratings widget */
.rate {
display: inline-block;
border: 0;
}
/* Hide radio */
.rate > input {
display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
float: right;
}
/* The star of the show */
.rate > label:before {
display: inline-block;
font-size: 1.1rem;
padding: .3rem .2rem;
margin-right:0;
cursor: pointer;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005"; /* full star */
}
/* Half star trick */
.rate .half:before {
content: "\f005"; /* half star no outline */
position: absolute;
padding-right: 0;
width: 0.6rem;
overflow: hidden;
margin-right: 0.4rem;
}
/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100; } /* color previous stars on hover */
/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D; }
<fieldset class="rate">
<input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
<input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
<input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>
<input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
<input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>
<input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
<input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>
<input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
<input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>
<input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
</fieldset>
I am trying to do a css hover effect.
I want the previous stars to also change their background image as the stars are hovered.
I have tried some different things but can't seem to understand the CSS that has to be used. Can anybody guide me?
I have the rating project here
HTML
<form action="" method="post" class="absolute babesRate flex">
<label>
<input type="radio" name="vote" value="1" id="vote1">
</label>
<label>
<input type="radio" name="vote" value="2" id="vote2">
</label>
<label>
<input type="radio" name="vote" value="3" id="vote3">
</label>
<label>
<input type="radio" name="vote" value="4" id="vote4">
</label>
<label>
<input type="radio" name="vote" value="5" id="vote5">
</label>
</form>
CSS
label{
background-image: url(../img/voteEmpty.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
label+input[type="radio"]:checked{
background-image: url(../img/voteFull.png);
}
label:hover{
background-image: url(../img/voteFull.png);
}
You need to do like this, where you put the input outside the label, or else they will not "see" the label(s), and then, with the flexbox order property, you swap them in markup so you can make use of the sibling selector ~.
.flex {
display: flex;
}
label {
display: inline-block;
background: gray url(../img/voteEmpty.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
margin: 2px;
}
input[type=radio] {
display: none
}
label:nth-of-type(1) { order: 5; }
label:nth-of-type(2) { order: 4; }
label:nth-of-type(3) { order: 3; }
label:nth-of-type(4) { order: 2; }
label:nth-of-type(5) { order: 1; }
input:checked ~ label {
background: red url(../img/voteFull.png);
}
form:hover label {
background: gray url(../img/voteEmpty.png);
}
form label:hover,
label:hover ~ label {
background: red url(../img/voteFull.png);
}
<form action="" method="post" class="absolute babesRate flex">
<input type="radio" name="vote" value="5" id="vote5">
<label for="vote5">5</label>
<input type="radio" name="vote" value="4" id="vote4">
<label for="vote4">4</label>
<input type="radio" name="vote" value="3" id="vote3">
<label for="vote3">3</label>
<input type="radio" name="vote" value="2" id="vote2">
<label for="vote2">2</label>
<input type="radio" name="vote" value="1" id="vote1">
<label for="vote1">1</label>
</form>
At the end of your styles, you have this:
.parent label:hover,
.parent label:hover ~ label {
background-image: url(../img/voteFull.png);
}
Change that to this one:
label:hover,
label:hover ~ label {
background-image: url(../img/voteFull.png);
}
In the example below, why does the selected star and all the stars before it not stay yellow?
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.rating {
display: inline;
border: none;
}
.rating > label > input {
margin: 0px;
}
.rating > label:before {
margin: 0px;
font-size: 1em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > label {
color: #ddd;
}
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:hover label { color: #FFD700; } /* hover previous stars in list */
.rating:not(:checked) > label:hover { color: #FFD700; } /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #ddd; } /* un-hover stars after current star */
<form>
<fieldset class="rating">
<label for="radio1"><input id="radio1" type="radio" value="1"></label>
<label for="radio2"><input id="radio2" type="radio" value="2"></label>
<label for="radio3"><input id="radio3" type="radio" value="3"></label>
<input type="submit" value="Submit">
</fieldset>
</form>
The lines of code that are causing the problem in my code are:
/* css */
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:hover label { color: #FFD700; } /* hover previous stars in list */
I can't figure out why the selectors aren't working as intended.
Please help!
because your checkbox isn't a child of .rating, you've wrapped it in a label so your code must be you need to take your input out of the label:
<input id="radio1" type="radio" value="1"><label for="radio1"></label>
and then change your css to:
.rating > input:checked + label{}
A working JSFiddle https://jsfiddle.net/LeoAref/s3btcwjg/
Here we can use the Adjacent sibling CSS selector +
.rating input:checked + label,
.rating input:hover + label,
.rating label:hover { color: #FFD700; }
And edit the HTML to be like:
<form>
<fieldset class="rating">
<input id="radio1" type="radio" name="radio" value="1"><label for="radio1"></label>
<input id="radio2" type="radio" name="radio" value="2"><label for="radio2"></label>
<input id="radio3" type="radio" name="radio" value="3"><label for="radio3"></label>
<input type="submit" value="Submit">
</fieldset>
</form>