luokebi/star.html

## star.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.star_bg{
			width: 120px;
			height: 20px;
			background: url('star.png') repeat-x;
			position: relative;
			overflow: hidden;
		}
		.star{
			height: 100%;
			width: 24px;
			line-height: 6em;
			position: absolute;
			z-index: 3;
			cursor: pointer;
		}
		.star_1 { left: 0; }
		.star_2 { left: 24px; }
		.star_3 { left: 48px; }
		.star_4 { left: 72px; }
		.star_5 { left: 96px; }

		.star:hover{
			background: url('star.png') repeat-x 0 -20px;
			left: 0;
			z-index: 2;
		}

		.star_1:hover { width: 24px; }
		.star_2:hover { width: 48px; }
		.star_3:hover { width: 72px; }
		.star_4:hover { width: 96px; }
		.star_5:hover { width: 120px; }

		.score {
			position: absolute;
			visibility: hidden;
		}
		.score:checked + .star {
    		background: url('star.png') repeat-x 0 -20px;
    		left: 0; z-index: 1;
		}

		.score_1:checked + .star_1 { width: 24px; }
		.score_2:checked + .star_2 { width: 48px; }
		.score_3:checked + .star_3 { width: 72px; }
		.score_4:checked + .star_4 { width: 96px; }
		.score_5:checked + .star_5 { width: 120px; }


		.star_checked {
    	background: url('star.png') repeat-x 0 -20px;
    	left: 0; z-index: 1;
		}

	</style>
</head>
<body>
<div class="star_bg">
	<input type="radio" id="starScore1" class="score score_1" value="1" name="score">
    <label for="starScore1" class="star star_1"></label>
    <input type="radio" id="starScore2" class="score score_2" value="2" name="score">
    <label for="starScore2" class="star star_2"></label>
    <input type="radio" id="starScore3" class="score score_3" value="3" name="score">
    <label for="starScore3" class="star star_3"></label>
    <input type="radio" id="starScore4" class="score score_4" value="4" name="score">
    <label for="starScore4" class="star star_4"></label>
    <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
    <label for="starScore5" class="star star_5"></label>
</div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.star_bg{
	width: 120px;
	height: 20px;
	background: url('star.png') repeat-x;
	position: relative;
	overflow: hidden;
	}
	.star{
	height: 100%;
	width: 24px;
	line-height: 6em;
	position: absolute;
	z-index: 3;
	cursor: pointer;
	}
	.star_1 { left: 0; }
	.star_2 { left: 24px; }
	.star_3 { left: 48px; }
	.star_4 { left: 72px; }
	.star_5 { left: 96px; }

	.star:hover{
	background: url('star.png') repeat-x 0 -20px;
	left: 0;
	z-index: 2;
	}

	.star_1:hover { width: 24px; }
	.star_2:hover { width: 48px; }
	.star_3:hover { width: 72px; }
	.star_4:hover { width: 96px; }
	.star_5:hover { width: 120px; }

	.score {
	position: absolute;
	visibility: hidden;
	}
	.score:checked + .star {
	background: url('star.png') repeat-x 0 -20px;
	left: 0; z-index: 1;
	}

	.score_1:checked + .star_1 { width: 24px; }
	.score_2:checked + .star_2 { width: 48px; }
	.score_3:checked + .star_3 { width: 72px; }
	.score_4:checked + .star_4 { width: 96px; }
	.score_5:checked + .star_5 { width: 120px; }



	.star_checked {
	background: url('star.png') repeat-x 0 -20px;
	left: 0; z-index: 1;
	}

	</style>
	</head>
	<body>
	<div class="star_bg">
	<input type="radio" id="starScore1" class="score score_1" value="1" name="score">
	<label for="starScore1" class="star star_1"></label>
	<input type="radio" id="starScore2" class="score score_2" value="2" name="score">
	<label for="starScore2" class="star star_2"></label>
	<input type="radio" id="starScore3" class="score score_3" value="3" name="score">
	<label for="starScore3" class="star star_3"></label>
	<input type="radio" id="starScore4" class="score score_4" value="4" name="score">
	<label for="starScore4" class="star star_4"></label>
	<input type="radio" id="starScore5" class="score score_5" value="5" name="score">
	<label for="starScore5" class="star star_5"></label>
	</div>
	</body>
	</html>