[InputAdornment] Textfield autofill background color isn't applied to InputAdornment

[cheesestringer]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

An autofilled textfield's InputAdornment doesn't get the same background color as the TextField.

Expected behavior 🤔

I expected the InputAdornment to have the same background color as the TextField.

Steps to reproduce 🕹

<TextField
  id="password"
  type={showPassword ? 'text' : 'password'}
  label="Password"
  placeholder="Password"
  autoComplete="current-password"
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton aria-label="toggle password visibility" onClick={togglePassword} edge="end">
          {showPassword ? <VisibilityOff /> : <Visibility />}
        </IconButton>
      </InputAdornment>
    )
  }}
/> 

Steps:

1. Have saved credentials
2. Refresh your page to trigger autofill

Context 🔦

Could just be me but with the missing background color the field looks bugged.

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19042 Binaries: Node: 16.13.2 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 103.0.5060.114 Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49) npmPackages: @emotion/react: ^11.8.2 => 11.9.3 @emotion/styled: ^11.8.1 => 11.9.3 @mui/base: 5.0.0-alpha.85 @mui/icons-material: ^5.5.1 => 5.8.4 @mui/material: ^5.7.0 => 5.8.4 @mui/private-theming: 5.8.4 @mui/styled-engine: 5.8.0 @mui/system: 5.8.4 @mui/types: 7.1.4 @mui/utils: 5.8.4 @mui/x-data-grid: ^5.10.0 => 5.12.1 @mui/x-date-pickers: ^5.0.0-alpha.2 => 5.0.0-alpha.6 @types/react: ^18.0.12 => 18.0.12 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.7.3 => 4.7.3 ```

[michaldudak]

The actual input does not cover the area behind the adornment, so when a browser sets a background for an auto-filled field, it doesn't extend to the adornment. When CSS has() selector has better support (which should be pretty soon), you can try to work around it by setting a background color of the root in your own CSS, like this:

input:-webkit-autofill,
.MuiInputBase-root:has(> input:-webkit-autofill) {
  background-color: blue;
}

[austv99]

The actual input does not cover the area behind the adornment, so when a browser sets a background for an auto-filled field, it doesn't extend to the adornment. When CSS has() selector has better support (which should be pretty soon), you can try to work around it by setting a background color of the root in your own CSS, like this:

input:-webkit-autofill,
.MuiInputBase-root:has(> input:-webkit-autofill) {
  background-color: blue;
}

Is there a method to achieving this via styleOverride in themes?

[ghost]

The actual input does not cover the area behind the adornment, so when a browser sets a background for an auto-filled field, it doesn't extend to the adornment. When CSS has() selector has better support (which should be pretty soon), you can try to work around it by setting a background color of the root in your own CSS, like this:

input:-webkit-autofill,
.MuiInputBase-root:has(> input:-webkit-autofill) {
  background-color: blue;
}

Is there a method to achieving this via styleOverride in themes?

MuiInputBase: {
styleOverrides: {
root: {
"&:has(> input:-webkit-autofill)": {
backgroundColor: "blue",
},
},
},
},

[jpmelnik]

Is there any official solution or update?

[xreyaf]

Is there any official solution or update?

Only by controlling autoComplete prop

e.g. InputProps={{ autoComplete: 'new-password' }}

Reference to MUI Doc

[TammyMun]

Ran into this while trying to adjust the TextField startAdornment background color to 1password's autofill background color. I managed to tweak it specifically for 1password's autofill data attributes.

A bit niche but adding it here so it might save someone's time in the future

As an added class to the above solution:

.MuiInputBase-root:has(> input[data-com-onepassword-filled="light"]) {
  background-color: rgb(219, 237, 255);
}

Inside sx prop:

<TextField
  ...
  sx={{
    "& .MuiOutlinedInput-root": {
        "&:has(> input[data-com-onepassword-filled=\"light\"])": {
             backgroundColor: "rgb(219, 237, 255)",
          }
      }
  ...
    }}
    />

Result can be shown in the upper TextField here, in comparison to the bottom one without it:

[anindosarker]

I think I've found the complete solution to this problem. Let's understand how it works first, so that we can modify it as needed.

What is it actually

The blue background color on autofilled fields is a browser feature, specifically from Chrome. You can override this with the :-webkit-autofill pseudo-selector.

How can we edit this?

Using global css overrides.

Add these lines in your global css file to change the color:

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

Overriding the global theme in MUI (RECOMMENDED)

You can follow the mui docs to override the global theme in mui docs

In most of the cases, you would be using the CSSBaseLine. So, this is the solution I've implemented in my theme configuration:

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: `
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #fa0000 inset !important;
      }`,
    },
  },
});