Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Untitled
.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"}
@thdoan

This comment has been minimized.

Copy link

thdoan commented Apr 3, 2014

NOTE: In order to correctly select the star-5 radio button when you select the 5th star, you'll have to put the input elements in reverse order (this is required because the labels are right-floated).

Here's a question for you: how come this breaks when you change .wrapper to #wrapper in dabblet.css and class="wrapper" to id="wrapper" in dabblet.html?

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.