Merge pull request #680 from Subhajit-2023-44/feature-branch-2

Fix star rating widget issue ! #602
YadavAkhileshh · Nov 6, 2024 · 8fec69d · 8fec69d
2 parents fb76197 + 1740fbd
commit 8fec69d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 22 deletions.
diff --git a/feedback.css b/feedback.css
@@ -55,25 +55,45 @@
             opacity: 0.5;
         }
 
-        /* Star Rating */
-        .star-rating input[type="radio"] {
-            display: none;
+
+        .star-rating {
+
+            display: flex;
+            justify-content: center;
+            margin-top: 10px;
+            flex-direction: row-reverse;
+            font-size: 3rem;
+            gap: 25px;
+            line-height: 1;
+
+        }
+
+        .star-rating input {
+
+            display: none; /* Hide the radio buttons */
+
         }
 
         .star-rating label {
+
+            color: #4b5563; /* Default star color */
             cursor: pointer;
-            color: #4b5563;
-            transition: all 0.3s ease;
+
         }
 
-        .star-rating:hover label {
+        .star-rating input:checked ~ label {
+
             color: #6366f1;
             text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+
         }
 
-        .star-rating input[type="radio"]:checked ~ label {
-            color: #6366f1;
-            text-shadow: 0 0 15px rgba(99, 102, 241, 0.7);
+        .star-rating label:hover,
+        .star-rating label:hover ~ label {
+
+            color: #6366f1; /* Hover effect */
+            text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+
         }
 
         /* Input and Textarea Styling */

diff --git a/feedback.html b/feedback.html
@@ -154,19 +154,25 @@
               <label class="block text-indigo-300 text-sm font-medium mb-2"
                 >Mission Effectiveness Rating</label
               >
-              <div class="star-rating flex justify-center space-x-6">
-                <input type="radio" id="star5" name="rating" value="5" />
-                <input type="radio" id="star4" name="rating" value="4" />
-                <input type="radio" id="star3" name="rating" value="3" />
-                <input type="radio" id="star2" name="rating" value="2" />
-                <input type="radio" id="star1" name="rating" value="1" />
-
-                <label for="star5" class="text-5xl">★</label>
-                <label for="star4" class="text-5xl">★</label>
-                <label for="star3" class="text-5xl">★</label>
-                <label for="star2" class="text-5xl">★</label>
-                <label for="star1" class="text-5xl">★</label>
-              </div>
+              <div class="feedback-box">
+
+                <form id="feedback-form" action="#" method="post">
+                    <div class="star-rating" aria-label="Rating" role="radiogroup">
+                        <input type="radio" id="star5" name="rating" value="5">
+                        <label for="star5" title="5 stars">★</label>
+                        <input type="radio" id="star4" name="rating" value="4">
+                        <label for="star4" title="4 stars">★</label>
+                        <input type="radio" id="star3" name="rating" value="3">
+                        <label for="star3" title="3 stars">★</label>
+                        <input type="radio" id="star2" name="rating" value="2">
+                        <label for="star2" title="2 stars">★</label>
+                        <input type="radio" id="star1" name="rating" value="1">
+                        <label for="star1" title="1 star">★</label>
+
+                    </div>
+
+                  </div>
+
             </div>
 
             <!-- Feedback Areas -->