Remove chrome browser autofill background color CSS

css Share on :

In this post, we are going to explain some code examples that can be used to remove or set a different background color to the input controls that are added by the chrome browser by default.

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

You can use this code snippet to change the background colour of an input that is added by default in chrome browser. This code will only work for chrome browser.

We are using '-webkit-box-shadow' CSS property to remove the default color of input added by chrome browser. We are using 'white' colour for our box shadow value. You can use any colour in place of that but 'transparent' will not work for the same.

You can also change text color of input added by default in chrome browser by using '-webkit-text-fill-color' CSS property.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

1 Comments

Devsheet

To change text color added by chrome by default, you can use CSS code

input:-webkit-autofill {
    -webkit-text-fill-color: yellow;
}

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer