diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss
index c416d6b46..41963186d 100644
--- a/src/components/input/themes/input.base.scss
+++ b/src/components/input/themes/input.base.scss
@@ -42,12 +42,10 @@
     font-family: var(--ig-font-family);
     z-index: 1;
 
-    // This is a hack that removes the autofill background and it's essential,
-    // otherwise the background is on top of the floating label in material theme.
-    // The !important flag is because themes that defin transition delay on that element are overriding the transition delay hack
+    // Fix for https://github.com/IgniteUI/igniteui-webcomponents/pull/2298#pullrequestreview-4772572600
     &:is(:-webkit-autofill, :autofill) {
-        transition-property: background-color, color !important;
-        transition-delay: 99999s !important;
+        background-clip: text;
+        -webkit-text-fill-color: var(--input-text-color, currentcolor);
     }
 }
 
diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss
index 27d38c06f..068f656fc 100644
--- a/src/components/input/themes/shared/input.common.scss
+++ b/src/components/input/themes/shared/input.common.scss
@@ -3,8 +3,12 @@
 
 $theme: $base;
 
+// The text color is mirrored in a custom property so that autofilled inputs can
+// pick it up through `-webkit-text-fill-color`. See input.base.scss
 [part~='input'] {
-    color: var-get($theme, 'idle-text-color');
+    --input-text-color: #{var-get($theme, 'idle-text-color')};
+
+    color: var(--input-text-color);
 }
 
 [part='prefix'] {
@@ -19,7 +23,9 @@ $theme: $base;
 
 [part~='filled'] {
     [part~='input'] {
-        color: var-get($theme, 'filled-text-color');
+        --input-text-color: #{var-get($theme, 'filled-text-color')};
+
+        color: var(--input-text-color);
     }
 
     [part='prefix'] {
@@ -58,7 +64,9 @@ input::-webkit-datetime-edit {
 :host(:not([readonly], [disabled]):hover) {
     [part~='filled'] {
         [part~='input'] {
-            color: var-get($theme, 'filled-text-hover-color');
+            --input-text-color: #{var-get($theme, 'filled-text-hover-color')};
+
+            color: var(--input-text-color);
         }
     }
 }
@@ -66,7 +74,9 @@ input::-webkit-datetime-edit {
 :host(:not([readonly], [disabled]):focus-within) {
     [part~='filled'] {
         [part~='input'] {
-            color: var-get($theme, 'focused-text-color');
+            --input-text-color: #{var-get($theme, 'focused-text-color')};
+
+            color: var(--input-text-color);
         }
     }
 }
diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss
index 4ce09841c..03c312e90 100644
--- a/src/components/input/themes/shared/input.material.scss
+++ b/src/components/input/themes/shared/input.material.scss
@@ -65,7 +65,9 @@ $fs: rem(16px) !default;
 }
 
 [part~='input filled'] {
-    color: var-get($theme, 'filled-text-color');
+    --input-text-color: #{var-get($theme, 'filled-text-color')};
+
+    color: var(--input-text-color);
 }
 
 [part='label'] {