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

Author: emiliodeg

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>

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.