diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index ffc2adf0f8..089bdcfa0f 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -39,6 +39,21 @@
height: calc(100% + env(safe-area-inset-top));
}
+ /* Remove autofill styles on Webkit */
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ textarea:-webkit-autofill,
+ textarea:-webkit-autofill:hover,
+ textarea:-webkit-autofill:focus,
+ select:-webkit-autofill,
+ select:-webkit-autofill:hover,
+ select:-webkit-autofill:focus {
+ border: 0;
+ -webkit-text-fill-color: transparent;
+ -webkit-box-shadow: none;
+ }
+ /* Force left-align date/time inputs on iOS mobile */
input::-webkit-date-and-time-value {
text-align: left;
}
diff --git a/web/index.html b/web/index.html
index 70072f2ae2..585d573536 100644
--- a/web/index.html
+++ b/web/index.html
@@ -43,6 +43,21 @@
height: calc(100% + env(safe-area-inset-top));
}
+ /* Remove autofill styles on Webkit */
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ textarea:-webkit-autofill,
+ textarea:-webkit-autofill:hover,
+ textarea:-webkit-autofill:focus,
+ select:-webkit-autofill,
+ select:-webkit-autofill:hover,
+ select:-webkit-autofill:focus {
+ border: 0;
+ -webkit-text-fill-color: transparent;
+ -webkit-box-shadow: none;
+ }
+ /* Force left-align date/time inputs on iOS mobile */
input::-webkit-date-and-time-value {
text-align: left;
}