Css remove autofill background

Change Autocomplete Styles in WebKit Browsers

We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted.

What we mean by autocomplete

Many browsers (including Chrome and Safari) provide a setting that allows users to automatically fill in details for common form fields. You have seen this when completing a form that asks for things like name, address, and email. The catch is that users must have enabled this setting in order for this snippet to be effective. If the setting is enabled, then WebKit browsers will style the fields it has autocompleted for the user, like so: Notice how the autocompleted fields have a yellow background? That’s what we’re referring to and going to change with this snippet.

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size . We can even change the color of the text using -webkit-text-fill-color which is included in the snippet below.

/* Change Autocomplete styles in Chrome*/ 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

Источник

How to Remove WebKit’s Banana-Yellow Autofill Background

If you’re using Chrome, Safari, or any other browser based on the WebKit or Blink engine, you’ve probably seen this effect plenty of times: You click into an field, start typing, and then select an autofill text that the browser so helpfully suggests to you. Suddenly, the has a «beautiful» banana-yellow background.

The idea is to signal to the user that the text field has been autofilled by the browser. However, the yellow background sometimes doesn’t work with the site’s design at all, so here’s a way to get rid of it. Before we look at the solution, let’s look at the problem again.

#The Yellow Autofill Background

Here’s a very simple form showing a single text field with a placeholder. It’s a regular element:

This is what the text field looks like (running within Chrome on Mac) when it’s being focused:

As soon as the user starts typing, Chrome suggests previously entered terms with the same prefix in its autofill list:

The user can now press the up and down arrow keys to navigate within the autofill list. From that moment on, the text field gets the yellow background:

Finally, the yellow background remains even after the text field (now containing the autofilled value) loses focus:

Let’s now see what we can do to get rid of this background color.

#Removing the Yellow Autofill Background

The first thought would probably be to simply set the CSS background property to the desired color, like this:

Unfortunately, setting that property has no effect when the yellow background is active. The trick is to add a large, white inset box shadow to the that is rendered on top of the background:

input:-webkit-autofill  -webkit-box-shadow: inset 0 0 0px 9999px white; >

That’s it — the yellow background is no longer visible:

To illustrate how this mechanism works, I’ve set the spread radius property to 4px , which was previously set to 9999px . Also, I’m using a red shadow instead of a white one to make the shadow clearly visible. Here’s the result:

As you can see, the box shadow is rendered on the inside of the text field. This is because we’ve used the inset keyword, which causes the shadow to be drawn inside the border, above the background, but below content. Check out the box-shadow MDN page for more details.

#What About Existing Drop Shadows?

If you’re already using the box-shadow property to add drop shadows (or inset shadows) to your text fields, don’t worry. You can simply configure multiple shadows so that this approach will work with your existing design:

input:-webkit-autofill  border: 1px solid #ccc; -webkit-box-shadow: inset 0 0 0px 9999px white; > input:focus, input:-webkit-autofill:focus  border-color: #66afe9; -webkit-box-shadow: inset 0 0 0px 9999px white, 0 0 8px rgba(102, 175, 233, 0.6); >

#Other Approaches

This approach of removing the yellow autofill background is not the only solution. There’s a popular StackOverflow question where one answer suggests to use the transition-delay CSS property to simply delay the changing of the background color by a couple of hours. A little hacky, if you ask me, but then again, it’s CSS!

Источник

How to remove blue background on chrome autocomplete?

The chrome autocomplete feature is a convenient way to fill in forms, but it may not always display the way you want it to. One common issue users face is the blue background appearing behind the autocomplete suggestions. This background can be distracting and make it difficult to see the suggested options. If you’re facing this issue, there are a few solutions you can try to remove the blue background.

Method 1: Use CSS to Hide the Autocomplete Background

To remove the blue background on Chrome autocomplete, you can use CSS to hide the background. Here are the steps to do it:

1. First, you need to identify the input field that has the blue background on autocomplete. You can do this by inspecting the element in Chrome DevTools.
2. Once you have identified the input field, add the following CSS code to your stylesheet:

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

This code targets the input field with the :-webkit-autofill pseudo-class and sets the -webkit-box-shadow property to 0 0 0 30px white inset !important , which effectively hides the blue background.

That’s it! With this CSS code, you can now remove the blue background on Chrome autocomplete.

Method 2: Override the Chrome Autocomplete Style

To remove the blue background on Chrome autocomplete, you can override the default style using CSS. Here are the steps to do it:

1. First, you need to find the ID or class of the autocomplete element. You can use the Chrome Developer Tools to inspect the element and find its ID or class. For example, the ID of the autocomplete element for a login form might be «login-form-username-autocomplete».
2. Once you have the ID or class, you can override the default style using CSS. Here is an example code:

#login-form-username-autocomplete  background-color: white !important; >

This code sets the background color of the autocomplete element to white and uses the !important keyword to override any other styles that might be applied to the element.

1. You can also use the CSS property «background-image» to remove the blue background image that is used by default. Here is an example code:

#login-form-username-autocomplete  background-color: white !important; background-image: none !important; >

This code sets the background color to white and removes the background image.

1. If you want to remove the blue background for all autocomplete elements in Chrome, you can use the following code:

::-webkit-autofill  background-color: white !important; background-image: none !important; >

This code uses the ::-webkit-autofill selector to target all autocomplete elements and sets the background color to white and removes the background image.

That’s it! With these steps, you can remove the blue background on Chrome autocomplete using CSS.

Method 3: Disable Autocomplete for a Specific Form Field

To remove the blue background on Chrome autocomplete, you can use the «Disable Autocomplete for a Specific Form Field» method. Here are the steps to do it:

1. Add the «autocomplete» attribute to the form field you want to disable autocomplete for. Set the value to «off».

input type="text" name="username" autocomplete="off">

1. Use JavaScript to disable autocomplete for the form field. You can add this code to your JavaScript file or include it in a script tag in your HTML file.

document.getElementById("username").setAttribute("autocomplete", "off");

1. Use jQuery to disable autocomplete for the form field. You can add this code to your jQuery file or include it in a script tag in your HTML file.

$("#username").attr("autocomplete", "off");

1. Use CSS to remove the blue background on Chrome autocomplete. You can add this code to your CSS file or include it in a style tag in your HTML file.

input:-webkit-autofill  -webkit-box-shadow: 0 0 0px 1000px white inset; >

By following these steps, you can remove the blue background on Chrome autocomplete for a specific form field using the «Disable Autocomplete for a Specific Form Field» method.

Method 4: Use a Third-Party Autocomplete Library

To remove the blue background on Chrome autocomplete using a third-party autocomplete library, you can follow these steps:

1. Choose an autocomplete library that supports customizing the background color. One example is the jQuery UI Autocomplete library.
2. Include the necessary files in your HTML document. For jQuery UI Autocomplete, you will need to include the jQuery library and the jQuery UI library, as well as the CSS file for the theme you want to use.

head> script src="https://code.jquery.com/jquery-3.6.0.min.js"> script> script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"> script> link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css"> head>

1. Add an input field to your HTML document and initialize the autocomplete widget with the options you want. In this case, we will set the highlightClass option to an empty string to remove the blue background.

body> input id="myInput" type="text"> script> $(function()  $("#myInput").autocomplete( source: ["apple", "banana", "cherry"], highlightClass: "" >); >); script> body>

1. Test the autocomplete widget by typing in the input field and verifying that the blue background is no longer present.

body> input id="myInput" type="text"> script> $(function()  $("#myInput").autocomplete( source: ["apple", "banana", "cherry"], highlightClass: "" >); >); script> body>

That’s it! With these steps, you can use a third-party autocomplete library to remove the blue background on Chrome autocomplete.

Источник