Adjust CSS to suppress webkit-autofill style

Signed-off-by: Christian König <[email protected]>
pi-hole · Dec 28, 2022 · 7a44381 · 7a44381
1 parent 9a56e8e
commit 7a44381
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
@@ -504,6 +504,16 @@ div.dataTables_wrapper div.dataTables_length select {
   color: #bec5cb;
   border: 1px solid #3d444b;
 }
+
+/*** Overwrite chrome's input field auto-filling ***/
+input:-webkit-autofill,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: #bec5cb !important;
+  -webkit-box-shadow: 0 0 0px 1000px #353c42 inset;
+  transition: background-color 1s ease-in-out 0s;
+}
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {

diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
@@ -56,11 +56,15 @@ table {
   color: #b2aba1;
   opacity: 0.5 !important;
 }
+
+/*** Overwrite chrome's input field auto-filling ***/
 input:-webkit-autofill,
+input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
-  background-color: #555b00 !important;
-  color: #e8e6e3 !important;
+  -webkit-text-fill-color: #b2aba1 !important;
+  -webkit-box-shadow: 0 0 0px 1000px #181a1b inset;
+  transition: background-color 1s ease-in-out 0s;
 }
 ::-webkit-scrollbar {
   background-color: #202324;

diff --git a/style/themes/default-light.css b/style/themes/default-light.css
@@ -291,3 +291,13 @@ td.highlight {
   border-color: #337ab7;
   color: #fff;
 }
+
+/*** Overwrite chrome's input field auto-filling ***/
+input:-webkit-autofill,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: #666 !important;
+  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+  transition: background-color 1s ease-in-out 0s;
+}
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -285,6 +285,17 @@ div.dataTables_wrapper div.dataTables_length select {
   border-radius: 8px;
 }
 
+/*** Overwrite chrome's input field auto-filling ***/
+input:-webkit-autofill,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: #fff !important;
+  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
+  transition: background-color 1s ease-in-out 0s;
+}
+
+
 input.form-control,
 textarea.form-control {
   border-radius: 8px;