From 416475114de10c9fef0a5fad5865fd08a49cf84f Mon Sep 17 00:00:00 2001
From: Emilio Degiovanni <1172386+emiliodeg@users.noreply.github.com>
Date: Wed, 11 Mar 2026 18:20:36 -0300
Subject: [PATCH] fix(material/input): MatInput autofill styling only covers
 part of the displayed input

autofill attribute does not work properly with current styles and only covers the input/textarea box instead of all the form control

fixes: #27337
---
 src/dev-app/input/input-demo.html       | 36 +++++++++++++++++++++++++
 src/material/form-field/form-field.scss |  6 +++++
 2 files changed, 42 insertions(+)

diff --git a/src/dev-app/input/input-demo.html b/src/dev-app/input/input-demo.html
index 257ba448fd80..5e5de7526413 100644
--- a/src/dev-app/input/input-demo.html
+++ b/src/dev-app/input/input-demo.html
@@ -977,3 +977,39 @@ <h4>No defined label</h4>
     </p>
   </mat-card-content>
 </mat-card>
+
+
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Basic outlined/filled fields with autofill attribue</mat-toolbar>
+  <mat-card-content>
+    <form>
+      <table style="width: 100%" cellspacing="0"><tr>
+        <td>
+          <mat-form-field style="width: 100%" appearance="outline">
+            <input matInput placeholder="First name" autofill="given-name">
+          </mat-form-field>
+        </td>
+        <td>
+          <mat-form-field style="width: 100%" appearance="fill">
+            <mat-label>Last name</mat-label>
+            <input matInput autofill="family-name" placeholder="Last name">
+          </mat-form-field>
+        </td>
+      </tr>
+    <tr>
+        <td>
+          <mat-form-field style="width: 100%" appearance="outline">
+            <mat-label>Home Address</mat-label>
+            <textarea matInput autofill="address" placeholder="Home address"></textarea>
+          </mat-form-field>
+        </td>
+        <td>
+          <mat-form-field style="width: 100%" appearance="fill">
+            <mat-label>Shipping</mat-label>
+            <textarea matInput autofill="address" placeholder="Shipping address"></textarea>
+          </mat-form-field>
+        </td>
+      </tr></table>      
+    </form>
+  </mat-card-content>
+</mat-card>
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
index 00b2c60540e4..77e356700045 100644
--- a/src/material/form-field/form-field.scss
+++ b/src/material/form-field/form-field.scss
@@ -186,6 +186,12 @@ $_icon-prefix-infix-padding: 4px;
   &:has(textarea[cols]) {
     width: auto;
   }
+
+  input:-webkit-autofill,
+  textarea:-webkit-autofill {
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: token-utils.slot(form-field-filled-input-text-color, $fallbacks);
+  }
 }
 
 // In the form-field theme, we add a 1px left margin to the notch to fix a rendering bug in Chrome.