CSS-only Star Rating

CSS-only-Star-Rating.markdown

CSS-only Star Rating

The goal was to create a radio button-powered star rating widget that uses CSS only. I wanted each star preceding the selected one to appear selected as well.

A Pen by Marcus Burnette on CodePen.

License.

index.html

<h1>How excited are you for the new Avengers movie on a scale of 1-5 stars?</h1>
<div class="rating">
		<input type="radio" name="test" id="one" checked />
		<label for="one"><i class="fa fa-star"></i></label>
		<input type="radio" name="test" id="two" />
		<label for="two"><i class="fa fa-star"></i></label>
		<input type="radio" name="test" id="three" />
		<label for="three"><i class="fa fa-star"></i></label>
		<input type="radio" name="test" id="four" />
		<label for="four"><i class="fa fa-star"></i></label>
		<input type="radio" name="test" id="five" />
		<label for="five"><i class="fa fa-star"></i></label>
</div>
<hr/>
<h3>Goal:</h3>
<p>The goal was to create a radio button-powered star rating widget that uses CSS only. I wanted each star preceding the selected one to appear selected as well.</p>

style.scss

@import "compass/css3";
$rad: 8px;

.rating {
	background: #fff;
}

input[type="radio"] {
	position: fixed;
	top: 0;
	right: 100%;
}

label {
	font-size: 1.5em;
	padding: 0.5em;
	margin: 0;
	float: left;
	cursor: pointer;
	@include transition(0.2s);
}

input[type="radio"]:checked ~ input + label {
	background: none;
	color: #aaa;
}

input + label {
	background: #fff;
	color: orange;
	margin: 0 0 1em 0;
}

input + label:first-of-type {
	border-top-left-radius: $rad;
	border-bottom-left-radius: $rad;
}

input:checked + label {
	border-top-right-radius: $rad;
	border-bottom-right-radius: $rad;
}

hr {
	clear: both;
	border: 0;
	border-top: 2px solid #999;
	margin: 2em 0;
}

/* ----- DEMO STUFF ----- */
body {
	padding: 10%;
	line-height: 1.4;
	background: #888;
	color: #fff;
	font-family: sans-serif;
}