This page uses standard radio buttons to implement a user interface for rating on a scale of one to five. Thematic water drops riff on the more conventional "star".
Vector artwork is defined directly in index.html as inline SVG markup. Specifically, we create a set of SVG symbols, strategically named #active and #inactive. These symbols are re-used several times (in our radio button labels) via the SVG use tag. Importantly, Inline SVGs are adjustable via CSS (e.g. we can change the fill on :hover).
Droplets appear in descending order (5-4-3-2-1) in HTML, but this arrangement is flipped in CSS via flex-direction: row-reverse. This approach makes it possible to exploit Subsequent Sibling (~) logic in CSS. Note that CSS lacks a "prior sibling" combinator. To show / hide the inactive / active SVG symbols, we use the :checked and :hover psuedo-classes to toggle display: none and display: block.
As a caviat, keep in mind that this sort of adaptation involves tradeoffs between visual appearance, brand, usability, and accessibility.
For comparison (and further inspiration) note that it's also possible to do this without SVGs. For example, this codepen by James Barnett employs Font Awesome icons and the ::before pseudo-element. Remember that there are many ways to solve a problem. What other CSS or JavaScript-based approaches can you find?
This demo was created by Harold Sikkema.