From efc5d2ec654bfbb6906471eda6410c1a0c212d66 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Thu, 22 Oct 2026 17:41:47 +0300
Subject: [PATCH 1/2] feat(input): remove autofill background and text color

---
 .../src/input-group/themes/_base.scss         | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss
index cb2f8a9c547..4f269398809 100644
--- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss
+++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss
@@ -14,13 +14,15 @@ $file-theme: digest-schema($material-file-input);
 $transition-timing: .25s $out-cubic;
 
 @mixin input-display() {
+    --input-text-color: #{var-get($theme, 'filled-text-color')};
+
     position: relative;
     display: block;
     border: none;
     width: 100%;
     min-width: 0;
     background: transparent;
-    color: var-get($theme, 'filled-text-color');
+    color: var(--input-text-color);
     outline-style: none;
     box-shadow: none;
     text-overflow: ellipsis;
@@ -39,8 +41,16 @@ $transition-timing: .25s $out-cubic;
         line-height: normal;
     }
 
+    // Keeps the autofill background from covering the floating label and preserves the text color
+    &:is(:-webkit-autofill, :autofill) {
+        background-clip: text;
+        -webkit-text-fill-color: var(--input-text-color, currentcolor);
+    }
+
     &:hover {
-        color: var-get($theme, 'filled-text-hover-color');
+        --input-text-color: #{var-get($theme, 'filled-text-hover-color')};
+
+        color: var(--input-text-color);
 
         &::placeholder {
             color: var-get($theme, 'hover-placeholder-color');
@@ -48,8 +58,10 @@ $transition-timing: .25s $out-cubic;
     }
 
     &:focus {
+        --input-text-color: #{var-get($theme, 'focused-text-color')};
+
         cursor: text;
-        color: var-get($theme, 'focused-text-color');
+        color: var(--input-text-color);
 
         &::placeholder {
             color: var-get($theme, 'hover-placeholder-color');
@@ -381,8 +393,10 @@ $transition-timing: .25s $out-cubic;
 
             @include e(input) {
                 &:hover {
+                    --input-text-color: #{var-get($theme, 'filled-text-color')};
+
                     cursor: default;
-                    color: var-get($theme, 'filled-text-color');
+                    color: var(--input-text-color);
                 }
 
                 &:hover:not(:focus-within) {

From d7057e319ee2c8cd73d5e13c25155a538b47f998 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Fri, 23 Oct 2026 19:05:13 +0300
Subject: [PATCH 2/2] feat(input): address comment about the disabled state

---
 .../input-group/src/input-group/themes/_base.scss             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss
index 4f269398809..2158886f2fb 100644
--- a/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss
+++ b/projects/igniteui-angular/input-group/src/input-group/themes/_base.scss
@@ -505,8 +505,10 @@ $transition-timing: .25s $out-cubic;
 
         @include m(disabled) {
             %input-textarea-disabled-colors {
+                --input-text-color: #{var-get($theme, 'disabled-text-color')};
+
                 cursor: default;
-                color: var-get($theme, 'disabled-text-color');
+                color: var(--input-text-color);
 
                 &::placeholder {
                     color: var-get($theme, 'disabled-placeholder-color');