diff --git a/components/user/login.php b/components/user/login.php
index 20af59c..613e589 100644
--- a/components/user/login.php
+++ b/components/user/login.php
@@ -8,10 +8,10 @@ function login_form($error_msg = '')
                 <input type="hidden" name="form_id" value="login_form">
 
                 <label for="username">Username / Email</label>
-                <input id="username" name="username" required>
+                <input id="username" name="username" spellcheck="false" required>
 
                 <label for="password">Password</label>
-                <input id="password" name="password" type="password" required>
+                <input id="password" name="password" type="password" spellcheck="false" required>
 
                 <label class="form_checkbox_container">Stay Logged In?
                     <input name="stay_logged_in" type="checkbox" value="true">
diff --git a/css/base.css b/css/base.css
index 3ef051e..fe19731 100644
--- a/css/base.css
+++ b/css/base.css
@@ -23,7 +23,9 @@ p,
 small,
 label,
 input,
-.autofilled,
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 textarea,
 a,
 .modal_button,
@@ -359,7 +361,13 @@ i:hover {
 
 input,
 .autofilled,
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+input:-webkit-autofill:hover,
+textarea:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 textarea {
+  /* Try this first */
   border-radius: 12px;
   width: 100%;
   padding: 15px;
@@ -369,13 +377,7 @@ textarea {
   resize: none;
 }
 
-input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px black inset !important;
-  /* Try this first */
-}
-
 input:focus,
-.autofilled,
 textarea:focus,
 input:hover,
 textarea:hover {
diff --git a/css/dark.css b/css/dark.css
index a1c1414..47c2232 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -72,13 +72,20 @@ table tr {
 }
 
 input,
-input:is(:-webkit-autofill, :autofill),
 textarea {
   background-color: transparent;
   color: white;
   border: 3px solid white;
 }
 
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: white;
+  -webkit-box-shadow: 0 0 0px 1000px black inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
 .checkmark {
   border: 2px solid white;
 }
diff --git a/css/light.css b/css/light.css
index 2abc9c6..10fcb10 100644
--- a/css/light.css
+++ b/css/light.css
@@ -72,13 +72,20 @@ table tr {
 }
 
 input,
-input:is(:-webkit-autofill, :autofill),
 textarea {
   background-color: transparent;
   color: black;
   border: 3px solid black;
 }
 
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: black;
+  -webkit-box-shadow: 0 0 0px 1000px white inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
 .checkmark {
   border: 2px solid black;
 }
diff --git a/js/override_browser_styles.js b/js/override_browser_styles.js
index b321144..e69de29 100644
--- a/js/override_browser_styles.js
+++ b/js/override_browser_styles.js
@@ -1,16 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-  let inputs = document.querySelectorAll('input');
-
-  inputs.forEach(input => {
-    if (input.matches(':-webkit-autofill')) {
-      input.classList.add('autofilled');
-    }
-
-    function apply_hover(el) {
-      input.classList.add('autofilled');
-    }
-
-    input.addEventListener('hover', apply_hover);
-    input.addEventListener('focus', apply_hover);
-  });
-});