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 で autofill の動作を再現します。次に MatInput のスタイルを調べ、MDC web text-field のデモと比較します。ブラウザーの autofill の色が内部の input だけでなく、表示されている入力ボックス全体を覆えば完了です。

索引モデルが issue の本文から書いたものです。