CSS: Star Rater

When I first started blogging, I wanted to challenge myself and create something using css that typically was done using javascript. Using links and an unordered list I was able to pull off creating a star rater with just a dash of markup and a pinch of CSS. Lots of people used that code and still do to this day. 

I wondered after all these years (it's been like 7 years!) since I wrote that tutorial, how I would attack the same problem. In my mind, there were two failures from my previous experiments. I felt the star rating should use a radio form control (also, a progress bar might be semantically appropriate too) instead of links. Also, to keep up with the insane resolution game these days, it would need to be scalable ala SVG.

Rather than bore you with the walkthrough, I'd prefer to let you tinker with it on codepen:  

See the Pen CSS/SVG Star Rater by Rogie (@rogie) on CodePen

You might be asking the question, why not just utf-8 encode rather than base64 encoding the SVG? Seems a fair question — my answer? Some modern browsers seem to choke on utf-8 encoded data-uri SVGs. But, if you'd like to tinker with the data-uri with utf-8 encoding, here's the codepen for that.

Also, you may have noticed that it's not only retina-proof, but it is scalable — try editing it on Codepen and changing width to 500px and height to 100px. What follows, you will witness, is nothing short of wizardry.

The Nitty Gritty

Supported in: IE9+, Firefox 10+, Safari 5+, Chrome 14+, Opera 10+, iOS6 Safari, iOS6 Chrome 

css html svg form