사이트에 별점 추가

별점.zip

0.04MB

기본 샘플을 확인하시려면 첨부파일을 다운받으시면 됩니다.

 

상단에 이미지 커스텀한 내용 확인하시려면 아래 코드를 참고하시길 바랍니다. 

html

<div class="star-input">
	<p class="score"><b>0</b>점</p>
	<span class="input">
		<input type="radio" name="star-input" value="1" id="p1">
		<label for="p1">1</label>
		<input type="radio" name="star-input" value="0.5" id="p1_2">
		<label for="p1_2">0.5</label>
		<input type="radio" name="star-input" value="2" id="p2">
		<label for="p2">2</label>
		<input type="radio" name="star-input" value="1.5" id="p2_2">
		<label for="p2_2">1.5</label>
		<input type="radio" name="star-input" value="3" id="p3">
		<label for="p3">3</label>
		<input type="radio" name="star-input" value="2.5" id="p3_2">
		<label for="p3_2">2.5</label>
		<input type="radio" name="star-input" value="4" id="p4">
		<label for="p4">4</label>
		<input type="radio" name="star-input" value="3.5" id="p4_2">
		<label for="p4_2">3.5</label>
		<input type="radio" name="star-input" value="5" id="p5">
		<label for="p5">5</label>
		<input type="radio" name="star-input" value="4.5" id="p5_2">
		<label for="p5_2">4.5</label>
	</span>
</div>

css

.star-input{
	padding: 25px 15px;
}
.star-input>.input{
text-align: center;
    margin-top: 10px;
}
.star-input>.input,
.star-input>.input>label:hover,
.star-input>.input>input:focus+label,
.star-input>.input>input:checked+label{display: inline-block;vertical-align:middle;background:url('../images/grade_img.png')no-repeat;}
.star-input {
    width: 100%;
    text-align: center;
}
.score{font-size:18px; line-height:25px; color:#fc4c4e; font-weight:bold;text-align:center;}
/* .star-input{display:inline-block; white-space:nowrap;width:225px;height:40px;padding:25px;line-height:30px;} */
.star-input>.input{display:inline-block;width:150px;background-size:150px;height:28px;white-space:nowrap;overflow:hidden;position: relative;}
.star-input>.input>input{position:absolute;width:1px;height:1px;opacity:0;}
star-input>.input.focus{outline:1px dotted #ddd;}
.star-input>.input>label{width:30px;height:0;padding:28px 0 0 0;overflow: hidden;float:left;cursor: pointer;position: absolute;top: 0;left: 0;}
.star-input>.input>label:hover,
.star-input>.input>input:focus+label,
.star-input>.input>input:checked+label{background-size: 150px;background-position: 0 bottom;}
.star-input>.input>label:hover~label{background-image: none;}
.star-input>.input>label[for="p1_2"]{width:15px;z-index:10;}
.star-input>.input>label[for="p1"]{width:30px;z-index:9;}
.star-input>.input>label[for="p2_2"]{width:45px;z-index:8;}
.star-input>.input>label[for="p2"]{width:60px;z-index:7;}
.star-input>.input>label[for="p3_2"]{width:75px;z-index:6;}
.star-input>.input>label[for="p3"]{width:90px;z-index:5;}
.star-input>.input>label[for="p4_2"]{width:105px;z-index:4;}
.star-input>.input>label[for="p4"]{width:120px;z-index:3;}
.star-input>.input>label[for="p5_2"]{width:135px;z-index:2;}
.star-input>.input>label[for="p5"]{width:150px;z-index:1;}
.star-input>output{display:inline-block;width:60px; font-size:18px;text-align:right; vertical-align:middle;}