fix: text input autofill (#125)

- prevent browsers from changing background color after autofilling - ensure label translates after autofilling
ninja · Jan 11, 2022 · c864e7d · c864e7d
1 parent 503f573
commit c864e7d
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/lib/components/input/input.module.css b/src/lib/components/input/input.module.css
@@ -132,12 +132,19 @@
 	color: var(--md-color-primary);
 }
 
+.input:-webkit-autofill {
+	transition-delay: 6000s;
+	transition-property: background-color, color;
+}
+
 .container.filled > .input:focus-within + .label,
+.container.filled > .input:-webkit-autofill + .label,
 .container.filled > .input:not(:placeholder-shown) + .label {
 	transform: translate3d(0, -1rem, 0);
 }
 
 .container.outlined > .input:focus-within + .label,
+.container.outlined > .input:-webkit-autofill + .label,
 .container.outlined > .input:not(:placeholder-shown) + .label {
 	background-color: inherit;
 	left: 0.8rem;