No JavaScript – Pure CSS – State Rating

right click to check the code,
it uses HTML(4.1) and CSS(3.1),

the state is kept using input type=”radio” (only one can be selected out of the group),
and the z-index makes sure everyone is clickable,
nesting labels allows styling without the actual HTML element,
and using text stored in attributes reduces the use of too “node-specific” css-rules.

you can wrap it with a form, add some keyframe animation or transition to make things smooth
and an submit button.

Usually you’ll see it in form of “stars” or “hearts”, this way it uses emoji… :]

Here is a simpler examples, where the moji is the same for each of the check states,
it forms a much simpler, but clear result.

with a “lower-layer” being set as a little more transparent than the selected color,
and still using same emoji for selected/unselected, the effect is much more clear,
and the “lags” of under-layer elements is less visible…

also available here: