Eliminate the golden hue from the input field when autofill is activated

Can anyone help me figure out how to get rid of this unsightly chrome background that appears when autofill is enabled? (See below for reference.)

I've attempted the following solutions:

*:focus {
    outline: 0;
}
input:-webkit-autofill {
    -webkit-box-shadow: none;
    -webkit-text-fill-color: #fff !important;
}
button:focus, input:focus, a:focus {
    text-decoration: none !important;
    outline: none !important;
}

Unfortunately, none of these methods have been successful. Any assistance, suggestions, or insights would be sincerely appreciated.

htmlformscssinput

Answer №1

Interestingly, this behavior is actually intentional according to webkit in order for the user to perceive it as being autofilled.

[email protected] The coloration behavior is inherited from WebKit and appears to be purposeful. It helps users recognize prefilled data.

For changing the background color to white, you can use:

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

If you want to disable autocomplete, you can add:

autocomplete="off"

Example:

<input type="text" name="some_name" autocomplete="off"></input>

Although possible, I would recommend not turning off auto complete for better usability.

Answer №2

Include the following code snippet in your header section: 
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border:none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;
}

This workaround appears to resolve the issue of the yellow re-populating after mouseleave

https://i.sstatic.net/xRBzj.gif

Answer №3

.form-item-search-block-form input:focus, 
.form-item-search-block-form input:hover, 
.form-item-search-block-form input:active {
    outline: 0 none;
    border: 0 none;
    background: #282828;
   background: url("../images/search_btn.png") no-repeat 96% 9px;
    color: rgb(202,202,202);
}

.form-item-search-block-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #282828 inset;
    -moz-box-shadow: 0 0 0 1000px #282828 inset;
    box-shadow: 0 0 0 1000px #282828 inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    -webkit-text-fill-color: #eee !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending a variable to an AngularJS factory

I am currently working on a select list that looks like this: <select name="make" class="form-control" ng-model="selectCity"> <option value="Kannur">Kannur</option> <option value="Agra">Agra</option> <option va ...

javascripthtmlangularjs

Utilizing CSS3 webkit-transitions with multiple properties on a div element along with multiple webkit-transition-delays

Is there a way to make a div slide 200px to the right and then reduce its scale by half separately? I want it to slide first and then scale, but currently both transformations happen simultaneously. I tried using webkit-transition-delay to set different ...

csswebkit

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml

Send information from a dropdown selection to mysql database without needing to reload the page

Looking for a way to submit data from a dropdown menu to a PHP script without refreshing the page? Currently, when a user selects an option from the dropdown menu, the form action directs it to a PHP script that updates the database query. Below is the cod ...

phpjquerymysqlajaxforms

What is the method for styling the third list item in a CSS hierarchy?

I'm struggling to understand the hierarchy in CSS for creating this specific layout. I've searched for explanations, but haven't found a clear one that breaks down how each level works. This is my first time working with CSS so it's bee ...

phphtmlcssmenuhtml-lists

Analyzing the structure of a pointer str and extracting smaller pointers from it

#include <stdio.h> #include <string.h> #include <stdlib.h> #define MAXLINES 25 int get_lines(char *studentinfo[]); int main() { int onswitch=0; char *studentData[100]; char *firstName[100]; char *lastName[100]; char *e ...

carrayssortingpointersinput

Using jQuery's ajax to populate several div elements in a single call

Trying to wrap my head around jQuery's Ajax function. There exists a page composed of various divs, along with an XML document generated from a MySql resultset. Within the jQuery function displayed below, I successfully fill the titleDiv with data. M ...

phpjqueryxmlajaxhtml

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

I am in the process of creating a navbar that includes select, input, and button elements. Below is the code I have written: <nav class="navbar sticky-top navbar-light p-0"> <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupp ...

csstwitter-bootstrapbootstrap-4

Is there a way to utilize local resources in case CDNs are unable to load properly?

Encountering an issue with Bootstrap and jQuery loading from CDN, sometimes failing to import from the CDN source. For instance: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii ...

javascripthtml

Implementing Fullpage.js with persistent elements throughout slides

Can I keep certain elements fixed between slides? I found that the only way to accomplish this was by placing the text element outside of the slide div. <div class="section" id="section1"> <div class="intro"> <h1> ...

javascriptjqueryhtmlfullpage.js

What is the best way to share specific links on LinkedIn articles?

When the LinkedIn button is clicked, the entire link does not get passed when the image is clicked. However, the Facebook link works perfectly fine. The LinkedIn button used to work before, has anything changed since then? <div align="center"> < ...

javascripthtmlreactjslinkedin-api

Having issues with a drop-down in Bootstrap. Is there anyone who can assist in getting it to function

I recently implemented a drop-down menu on the top navigation of my website. However, after applying Bootstrap to one of my pages, the drop-down menu stopped functioning properly. Below is the code that was applied: <link href="https://cdn.jsd ...

javascripthtmlcssbootstrap-5

Disable onclick action for programmatically created buttons

I'm facing an issue with the code I'm using to delete messages on my website. The problem is that while newly added messages are being dynamically loaded, the delete button (which links to a message deletion function) does not seem to be working. ...

javascriptjqueryhtmlajax

How can I align the title of a cell to the left while centering the remaining content?

I have a dilemma with two table cells placed side by side that stack upon triggering a media query for an HTML newsletter. I wish to align the headlines "Be Ready" and "Stay Organized" to the left when the responsive code activates, but the use of "margin: ...

htmlcss

Transferring information from website form to a C# program

Someone suggested using the HTTPListener class, but it appears to only return another web page in response. I need guidance on how to post data from a form on my website and process it in my C# application. If anyone has tutorials or simple examples, the ...

c#htmlweb

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

Basic event listener function, functional in CodePen but not operating in Chrome web browser

I'm experiencing an issue where event listener functions are not working on my browser (Chrome), but they work fine on CodePen. I've been troubleshooting this for about 2 hours, and I'm seeking some insights. Can anyone help? CodePen Link: ...

javascripthtml

Maintain the horizontal alignment of CSS floats

What causes the div on the right to float higher than the two divs on the left? How can I ensure they are all aligned at the top? HTML <header> <div class="nav" style="width:100%;border:#900 thin solid;"> <ul id='nav-left' ...

csscss-float

I am currently encountering a glitch with my video VTT file, as the subtitles are not appearing on screen

welcome to the world of coding WEBVTT 00:01.000 --> 00:8.000 coding is my passion join me on this journey ...

html