How do I make an specific rating star widget with CSS? - html

Question

I'm working on a rating stars field for a little form, but I can't change the HTML structure because it's created using Gravity Forms, so I just can "manipulate" it with CSS.
The form is structured as follows:
<ul>
<li>
<input type="radio" value="5">
<label>5/label>
</li>
<li>
<input type="radio" value="4">
<label>4</label>
</li>
<li>
...
</li>
</ul>
I've been using this example but now, with this structure, the [input/label] elements are not siblings of the other [input/label] elements.
How can I make it work without modifying the markup?
Thanks!

Answer 1

If you have to use that html structure, you can't do it without using javascript. I'm assuming you cant edit the current elements either (if you can, do so) so i have including that in the javascript as well, adding attributes as required.
http://codepen.io/partypete25/pen/BjyegJ
Here I've wrapped your list in a div with class .rating
Then i update the inputs and labels with the required attributes to emulate the example you have in your comment. Then i use jquerys replaceWith function to remove the list structure and return only the inputs and labels, wrapped in the .ratings div.
$(".rating ul li").each(function(i){
$("input", this).attr({
"id" : "star"+parseInt(5-i),
"name" : "rating"
});
$("label", this).attr({
"class": "full",
"for" : "star"+parseInt(5-i),
"title" : "Awesome - "+parseInt(5-i)+" stars"
});
});
replaceIt();
function replaceIt() {
$(".rating ul").replaceWith(function() {
return $('input, label', this);
});
}