bug(mat-input): MatInput's autofill styling only covers part of the displayed input

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When you add an autofill attribute (autofill="name" here) the browser may add some styling as part of its user agent. https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

This looks very poor on angular material as the autofill color only covers part of the input box; the rest is covered with the configured material color.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/g3qkzv?file=src%2Fexample%2Fform-field-appearance-example.html
Steps to reproduce:
1. Click the 'Fill form field'
2. Select an autocomplete

### Expected Behavior

Autofill styling should cover the whole input box

### Actual Behavior

The chrome defined 'blue area' only covers the internal 'input', the rest of the mat-input gets its gray background styling.

Auto-fill behavior appears work 'correctly' on the mdc-web 'demo' page https://material-components.github.io/material-components-web-catalog/#/component/text-field

(I added the autofill attribute)

### Environment

- Angular: 16.1.1
- CDK/Material: 16.1.1
- Browser(s): Chrome 113.0.5672.126 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 22.04.2 LTS

Commencez par l’exemple de champ de formulaire StackBlitz lié et reproduisez le comportement de l’autofill dans Chrome. Examinez ensuite le style de MatInput et comparez-le à la démonstration de champ de texte web de MDC ; le travail est terminé lorsque la couleur d’autofill du navigateur couvre toute la zone de saisie affichée plutôt que seulement l’input interne.

Rédigé par le modèle d'indexation à partir du texte de l'issue.