From 3244685cb16471baee875b143ceaa333822c7159 Mon Sep 17 00:00:00 2001
From: babelbes0487 <mechssuper73@gmail.com>
Date: Fri, 19 Jun 2026 18:08:33 +0700
Subject: [PATCH] Fix: select shows gray placeholder, turns white when value is
 chosen

---
 public/css/dashboard.css             | 12 +++++++++---
 resources/views/input-data.blade.php | 13 +++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/public/css/dashboard.css b/public/css/dashboard.css
index b95355a..8bb6dc3 100644
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@@ -248,13 +248,13 @@ .form-select {
     background: var(--filter-bg);
     border: 1px solid var(--filter-border);
     border-radius: var(--radius-sm);
-    color: var(--text-primary);
+    color: var(--text-muted);
     font-family: var(--font);
     font-size: 0.88rem;
-    font-weight: 400;
+    font-weight: 300;
     outline: none;
     cursor: pointer;
-    transition: all var(--transition);
+    transition: color var(--transition), border-color var(--transition), background var(--transition);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -264,6 +264,12 @@ .form-select {
     padding-right: 36px;
 }
 
+/* When a real value has been selected */
+.form-select.is-selected {
+    color: var(--text-primary);
+    font-weight: 400;
+}
+
 .form-select:focus {
     border-color: rgba(255, 255, 255, 0.2);
     background-color: rgba(255, 255, 255, 0.05);
diff --git a/resources/views/input-data.blade.php b/resources/views/input-data.blade.php
index 12bac33..a62df8e 100644
--- a/resources/views/input-data.blade.php
+++ b/resources/views/input-data.blade.php
@@ -340,6 +340,19 @@ function toggleTheme() {
             const mobileBtn = document.getElementById('mobileThemeBtn');
             if (btn) btn.addEventListener('click', toggleTheme);
             if (mobileBtn) mobileBtn.addEventListener('click', toggleTheme);
+
+            // Toggle warna select: abu-abu saat placeholder, putih saat sudah dipilih
+            document.querySelectorAll('.form-select').forEach(function(sel) {
+                function checkSelected() {
+                    if (sel.value !== '') {
+                        sel.classList.add('is-selected');
+                    } else {
+                        sel.classList.remove('is-selected');
+                    }
+                }
+                sel.addEventListener('change', checkSelected);
+                checkSelected(); // cek kondisi awal (misal saat back/reload)
+            });
         });
     </script>
 </body>