-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstar_Rating.html
56 lines (49 loc) · 1.54 KB
/
star_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
<!DOCTYPE html>
<html>
<head>
<title>Star Rating Example</title>
<style>
.star-rating {
display: inline-block;
direction: rtl;
}
.star-rating input[type="radio"] {
display: none;
}
.star-rating label {
display: inline-block;
width: 25px;
height: 25px;
background-image: url('path-to-star-icon.png');
background-size: cover;
cursor: pointer;
}
.star-rating input[type="radio"]:checked~label {
background-image: url('/star2.jpg');
}
</style>
</head>
<body>
<div class="star-rating">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"></label>
</div>
<script>
const ratingInputs = document.querySelectorAll('.star-rating input[type="radio"]');
ratingInputs.forEach((input) => {
input.addEventListener('change', (event) => {
const selectedRating = event.target.value;
// Process the selected rating as needed
});
});
</script>
</body>
</html>