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

Bắt đầu với ví dụ trường biểu mẫu StackBlitz được liên kết và tái hiện hành vi autofill trong Chrome. Sau đó, kiểm tra kiểu dáng của MatInput và so sánh với bản demo web text-field của MDC; hoàn tất khi màu autofill của trình duyệt bao phủ toàn bộ hộp nhập liệu được hiển thị thay vì chỉ input bên trong.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.