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.
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.
<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> |
@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; | |
} |