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

从链接的 StackBlitz 表单字段示例开始，在 Chrome 中复现自动填充行为。然后检查 MatInput 的样式，并将其与 MDC Web 文本字段演示进行比较；当浏览器的自动填充颜色覆盖整个显示的输入框，而不仅仅是内部 input 时，即表示完成。

由索引模型根据 Issue 内容生成。