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

[bdirito]

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

[bdirito]

I have worked around this by disabling autofill coloring with

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

This isn't 'correct' in that my application has no reason to disable autofill coloring however its better then being 'half-colored'.

https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

[Klaster1]

Had the same issue. As a workaround, you can disable the default indicator and author a custom one, at least for Chrome:

@supports selector(:has(*)) {
  mat-form-field:has(input:-webkit-autofill) .mdc-text-field {
    background-color: var(--your-custom-indicator-background-color) !important;
  }
  .mat-mdc-form-field-infix {
    input {
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: var(--your-input-text-color);
      }
    }
  }
}

[json-derulo]

In the meantime, Firefox added support for :has. Also for me a much simpler version of the code works (tested with Angular 18 in Chrome & Safari):

mat-form-field:has(input:-webkit-autofill) {
  // This is the color which Chrome uses
  --mdc-filled-text-field-container-color: #e8f0fe;

  input:-webkit-autofill {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--mdc-filled-text-field-input-text-color);
  }
}