-
Notifications
You must be signed in to change notification settings - Fork 0
/
Rating Exercise.html
39 lines (39 loc) · 1005 Bytes
/
Rating Exercise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>
<head>
<title>Rating Selection Example</title>
<style>
#hide{
display:none;
}
.rating input{
position:absolute;
opacity:0;
cursor:pointer;
width:17px;
}
.rating{
height: 20px;
width: 100%;
}
.rating span{
width:24px;
height:16px;
line-height:16px;
padding:1px 22px 1px 0;
background:url('http://everythingfrontend.com/samples/star-rating/star.png') no-repeat 3px 0px;
}
.rating input[type=radio]:checked +span ~ span{
background-position: 3px -16px;
}
</style>
</head>
<div class="rating">
<input type="radio" name="rating" value="0" checked /><span id="hide"></span>
<input type="radio" name="rating" value="1" /><span></span>
<input type="radio" name="rating" value="2" /><span></span>
<input type="radio" name="rating" value="3" /><span></span>
<input type="radio" name="rating" value="4" /><span></span>
<input type="radio" name="rating" value="5" /><span></span>
</div>
</html>