Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Rating Stars
.wrapper:hover label{
background-position:left bottom;
}
label{
background:url('http://img833.imageshack.us/img833/5959/stard.png') no-repeat left bottom;
float:right;
line-height:20px;
padding-left:20px;
height:15px;
}
input:checked+label,.wrapper:hover label:hover,.wrapper:hover label:hover~label{
background-position:0px -1px;
}
input:checked~label{
background-position:0px -1px;
}
input{
display:none;
}
.wrapper{
float:left;
}
<div class="wrapper">
<input type="radio" name="radiobutton" id="star-1"/><label for="star-1"></label>
<input type="radio" name="radiobutton" id="star-2"/><label for="star-2"></label>
<input type="radio" name="radiobutton" id="star-3"/><label for="star-3"></label>
<input type="radio" name="radiobutton" id="star-4"/><label for="star-4"></label>
<input type="radio" name="radiobutton" id="star-5"/><label for="star-5"></label>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.