Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@git-ashish
Forked from anonymous/dabblet.css
Created March 23, 2014 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save git-ashish/9720428 to your computer and use it in GitHub Desktop.
Save git-ashish/9720428 to your computer and use it in GitHub Desktop.
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