Untitled

dabblet.css

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

dabblet.html

<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>

settings.json

{"view":"split","prefixfree":"1","page":"css"}

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?