Looking for help with implementing a Star rating Feedback on articles in Visualforce page. Came across some code that seems to fit the bill but facing issues with getting it to work when placed in a file and executed, particularly in Firefox. Any assistance would be greatly appreciated!
@IamDesai - Here is my code
<html>
<head>
<style>
.star-rating{
font-size:0;
white-space:nowrap;
display:inline-block;
width:250px;
height:50px;
overflow:hidden;
position:relative;
background:
url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#DDDDDD" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>');
background-size: contain;
}
i{
opacity: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20%;
z-index: 1;
background:
url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#FFDF88" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>');
background-size: contain;
}
input{
-moz-appearance:none;
-webkit-appearance:none;
opacity: 0;
display:inline-block;
width: 20%;
height: 100%;
margin:0;
padding:0;
z-index: 2;
position: relative;
&:hover + i,
&:checked + i{
opacity:1;
}
}
i ~ i{
width: 40%;
}
i ~ i ~ i{
width: 60%;
}
i ~ i ~ i ~ i{
width: 80%;
}
i ~ i ~ i ~ i ~ i{
width: 100%;
}
}
.choice{
position: fixed;
top: 0;
left:0;
right:0;
text-align: center;
padding: 20px;
display:block;
}
*, ::after, ::before{
height: 100%;
padding:0;
margin:0;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
&::before{
height: 100%;
content:'';
width:0;
background:red;
vertical-align: middle;
display:inline-block;
}
}
</style>
<script type="text/javascript">$(':radio').change(
function(){
$('.choice').text( $(this).val() + ' stars' );
}
)</script>
</head>
<body>
<strong class="choice">Choose a rating</strong><br>
<span class="star-rating">
<input type="radio" name="rating" value="1"><i></i>
<input type="radio" name="rating" value="2"><i></i>
<input type="radio" name="rating" value="3"><i></i>
<input type="radio" name="rating" value="4"><i></i>
<input type="radio" name="rating" value="5"><i></i>
</span>
</body>
</html>