-
Notifications
You must be signed in to change notification settings - Fork 0
/
rating.html
66 lines (55 loc) · 1.86 KB
/
rating.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
?>
<html>
<head>
<style>
.rate-area {
float: left;
border-style: none;
}
.rate-area:not(:checked) > input {
position: absolute;
top: -9999px;
clip: rect(0,0,0,0);
}
.rate-area:not(:checked) > label {
float: right;
width: 1em;
padding: 0 .1em;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 400%;
line-height: 1.2;
color: lightgrey;
text-shadow: 1px 1px #bbb;
}
.rate-area:not(:checked) > label:before { content: '★ '; }
.rate-area > input:checked ~ label {
color: gold;
text-shadow: 1px 1px #c60;
font-size: 450% !important;
}
.rate-area:not(:checked) > label:hover, .rate-area:not(:checked) > label:hover ~ label { color: gold; }
.rate-area > input:checked + label:hover, .rate-area > input:checked + label:hover ~ label, .rate-area > input:checked ~ label:hover, .rate-area > input:checked ~ label:hover ~ label, .rate-area > label:hover ~ input:checked ~ label {
color: gold;
text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
position: relative;
top: 2px;
left: 2px;
}
</style>
</head>
<body>
<form action="insert_rate.php?oid=" method="GET"> <ul class="rate-area">
<input type="radio" id="5-star" name="rating" value="5" /><label for="5-star" title="Amazing">5 stars</label>
<input type="radio" id="4-star" name="rating" value="4" /><label for="4-star" title="Good">4 stars</label>
<input type="radio" id="3-star" name="rating" value="3" /><label for="3-star" title="Average">3 stars</label>
<input type="radio" id="2-star" name="rating" value="2" /><label for="2-star" title="Not Good">2 stars</label>
<input type="radio" id="1-star" name="rating" value="1" /><label for="1-star" title="Bad">1 star</label>
</ul><br><br>
<button style="margin-left:200px;height:25px;width: 75px;">submit</button></form>
</body>
</html>