<h1>Rating Stars with no JS</h1>
<h2>float:right; and general siblings selector + input/label</h2>
	<div class="rating"><!--
  --><input name="stars" id="e5" type="radio"></a><label for="e5">☆</label><!--
		--><input name="stars" id="e4" type="radio"></a><label for="e4">☆</label><!--
		--><input name="stars" id="e3" type="radio"></a><label for="e3">☆</label><!--
		--><input name="stars" id="e2" type="radio"></a><label for="e2">☆</label><!--
		--><input name="stars" id="e1" type="radio"></a><label for="e1">☆</label>

	<h2>direction:rtl and general siblings selector + &lt;a&gt; element</h2>
	<div class="rating rating2"><!--
		--><a href="#5" title="Give 5 stars">★</a><!--
		--><a href="#4" title="Give 4 stars">★</a><!--
		--><a href="#3" title="Give 3 stars">★</a><!--
		--><a href="#2" title="Give 2 stars">★</a><!--
		--><a href="#1" title="Give 1 star">★</a>

	<p>by <a href="http://creativejuiz.fr/">Geoffrey Crofte</a> (<a href="https://twitter.com/geoffreycrofte">@geoffreycrofte</a>)<br />
	<a href="https://twitter.com/intent/tweet?hashtags=CSS,Rating,Tutorial&amp;original_referer=http%3A%2F%2Fwww.creativejuiz.fr%2Ftrytotry%2Frating-stars-with-no-js.html&amp;related=geoffreycrofte&amp;text=Full%20CSS%20Rating%20system%20with%20no%20JS&amp;url=http%3A%2F%2Fwww.creativejuiz.fr%2Ftrytotry%2Frating-stars-with-no-js.html&amp;via=geoffreycrofte" title="Tweet in new window" target="_blank">Tweet</a><br />
    <a href="http://www.creativejuiz.fr/blog/tutoriels/systeme-notation-quelques-lignes-css" hreflang="fr">Back to the blog article (French)</a></p>
body {
  		background: #FDFDFD;
			font-family: "Segoe WP","Segoe UI", Helvetica, Arial, sans-serif;
		h1, h2 {
			color: #888;
		h1{ padding-top: 1.5em; padding-bottom: 2em; } 
		h2 {
			color: #aaa;
			padding: 2em 0 0.3em
		em {
			display: block;
			margin: .5em auto 2em;
			color: #bbb;

		p, p a { 
			color: #aaa;
			text-decoration: none;
		p a:hover,
		p a:focus {
			text-decoration: underline;
		p + p { color: #bbb; margin-top: 2em;}
		.detail {position: absolute; text-align: right; right: 5px; bottom: 5px; width: 50%;}
		a[href*="intent"] {
			margin-top: 0.4em;

		 * Rating styles
		.rating {
			width: 226px;
			margin: 0 auto 1em;
			font-size: 45px;
.rating input {
  float: right;
  opacity: 0;
  position: absolute;
		.rating a,
    .rating label {
			color: #aaa;
			text-decoration: none;
			-webkit-transition: color .4s;
			-moz-transition: color .4s;
			-o-transition: color .4s;
			transition: color .4s;
.rating label:hover ~ label,
.rating input:focus ~ label,
.rating label:hover,
		.rating a:hover,
		.rating a:hover ~ a,
		.rating a:focus,
		.rating a:focus ~ a		{
			color: orange;
			cursor: pointer;
		.rating2 {
			direction: rtl;
		.rating2 a {
/* no JS */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.