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

Comienza con el ejemplo de campo de formulario de StackBlitz enlazado y reproduce el comportamiento de autofill en Chrome. Después, inspecciona el estilo de MatInput y compáralo con la demostración de campo de texto web de MDC; el trabajo estará terminado cuando el color de autofill del navegador cubra todo el cuadro de entrada mostrado en lugar de solo el input interno.

Escrito por el modelo de indexación a partir del texto del issue.