diff --git a/components/Input/Input.module.css b/components/Input/Input.module.css
index b4250c8..95901b6 100644
--- a/components/Input/Input.module.css
+++ b/components/Input/Input.module.css
@@ -9,7 +9,17 @@
   background-color: rgba(var(--background-rgb), 0.1);
 }
 
-.input:focus-within {
+.input:focus {
   outline: none;
   background-color: rgba(var(--background-rgb), 0.3);
 }
+
+@media (prefers-color-scheme: dark) {
+  .input:hover {
+    background-color: rgba(var(--foreground-rgb), 0.05);
+  }
+
+  .input:focus {
+    background-color: rgba(var(--foreground-rgb), 0.2);
+  }
+}
diff --git a/components/Select/Select.module.css b/components/Select/Select.module.css
index 10ff848..7125e51 100644
--- a/components/Select/Select.module.css
+++ b/components/Select/Select.module.css
@@ -12,11 +12,21 @@
   background-color: rgba(var(--background-rgb), 0.1);
 }
 
-.select:focus-within {
+.select:focus:not(.select[disabled]) {
   outline: none;
   background-color: rgba(var(--background-rgb), 0.3);
 }
 
+@media (prefers-color-scheme: dark) {
+  .select:hover:not(.select[disabled]) {
+    background-color: rgba(var(--foreground-rgb), 0.05);
+  }
+
+  .select:focus:not(.select[disabled]) {
+    background-color: rgba(var(--foreground-rgb), 0.2);
+  }
+}
+
 .icon {
   position: absolute;
   right: 0.1rem;