CODEWITHSUNDEEP
cssgoogle-chromeautocompletebackground-color
PumpkinBreath
PumpkinBreath

Reputation: 915

how to remove blue background on chrome autocomplete

I am making a form and want each input to have be transparent but when I use the autocomplete feature in Chrome and then tab into the next field, the previous field gets a pale blue background.

I have tried using:

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

but this doesn't work. I don't want a white background I want it remain transparent when clicking into another input and setting the color to transparent doesn't work either.

How can this be achieved?

Upvotes: 26

Views: 23433

Answers (4)

kehitys
kehitys

Reputation: 33

@phifa's answer was very good, but with one caveat with his approach

The white background will overlap the placeholder if the placeholder is somewhat on top of input. Solution:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /* -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; */
  -webkit-background-clip: text;
  /* This is a bonus from here: https://github.com/nextui-org/nextui/issues/1346#issuecomment-1855635162*/
  transition: background-color 5000s ease-in-out 0s;
}

Upvotes: 1

PumpkinBreath
PumpkinBreath

Reputation: 915

As a further fix to this issue for anyone using TailwindCSS, which I have been playing with recently, this issue on the Tailwind GitHub describes a pretty neat solution.

Install prerequisites:

npm install -D autoprefixer
# or
yarn add -D autoprefixer

Update postcss.config.js:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Add the autofill modifier to your inline TailwindCSS class:

autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,255)]

I have chosen rgb(255, 255, 255) for a white background for autofill, works like a charm.

Upvotes: 0

phifa
phifa

Reputation: 906

Google seems to have done some magic with the shadow property. This made it work for me:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

Upvotes: 63

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

You may not be able to remove it on Chrome with CSS. This has gotten steadily more difficult recently as Google is hip to all of the ways developers try to hide or manipulate their consumer-oriented features. At least they changed recently to blue background instead of yellow. To avoid completely the only way I found is to use an incognito or guest window.

Upvotes: -4

Related Questions