Use jQuery to modify the default yellow color of Chrome's autofill feature

Struggling to get this code to work on my website, and it's starting to drive me crazy. I followed the instructions from BenjaminMiles' website, but something just isn't clicking.

The jquery code snippet I'm using is:

<script>
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="text" />

Despite trying everything, nothing seems to be working for me. The box-shadow trick didn't help either, especially since I have a background image set for my input field.

I've made sure to place the code within the body tag, so where could I possibly be going wrong?

javascriptjqueryhtmlcssgoogle-chrome

Answer №1

Consider ditching jQuery in this scenario. Utilize the transition property to animate the vanishing of the yellow background. Simply implement the following code:

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
    }

If you want to change the text color, include the following:

-webkit-text-fill-color: purple !important;

Make sure to swap out purple with your desired color.

Answer №2

vyastech came up with a helpful solution, suggesting to adjust the "delay" of the transition instead of the "duration"

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  transition: background-color 0s 3600s;
}

Answer №3

Here's an example of code that can be effective:

// Adjust the color to your liking ;)
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

To change text color, you can experiment with the following code:

-webkit-text-fill-color: yellow !important;

If you prefer using jQuery, you can try this code snippet:

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
}

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

Loading content from another webpage within a webpage using Ajax

I successfully implemented an Ajax chat in a PHP page and it was working perfectly. However, when I tried to integrate the chat into another page using a pop-up div (via CSS with z-index), I encountered some issues. Here is the code snippet: function sho ...

javascriptphpjqueryajax

Issue with submitting AJAX PUT request to database

Trying to send data back to the database using a WebAPI, everything works correctly with Insomnia sending this JSON object using the PUT method. { "movieId": 11, "customerId": 6, "dateRented": "2017-12-13T22:50:53.93", "bee ...

jqueryajaxasp.net-web-apiput

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

javascripthtmlvue.js

Is there a simpler way to check if the element is not X or if its parent is not X using jQuery?

In my coffeescript code, I have set up event listeners to track all body clicks: $('body').on 'click', (e) -> if not $(e.target).hasClass('notification') and $(e.target).parents('td.notification').lengt ...

javascriptjqueryjquery-selectorscoffeescript

Having trouble with jQuery scripts after making an ajax request?

I am working on a partial view that contains a table implemented with jQuery DataTables. @model IEnumerable<DSPFuelLog.Models.code_AutoMake> <h3>Auto Make List</h3> <table id="Auto-Make-Table" class="table table-bordered table-stripe ...

jqueryajaxasp.net-mvc

ways to invoke javascript function on body loading

I'm struggling to invoke a JavaScript function when the body loads. Currently, I have the function call on a button but cannot get it to work when added to the body load event. HTML: <body onload="bodyload();"> JavaScript: function bodyload( ...

javascriptjqueryhtml

The function within filereader.onload is not running properly in JavaScript

When working with FileReader to read a file and convert it to base64 for further actions, I encountered an issue. Although I was able to successfully read the file and obtain its base64 representation, I faced difficulties in utilizing this data to trigger ...

javascripttypescriptfilereader

How can I extract the text within a Span tag using Selenium WebDriver?

Is there a way to retrieve the text from a span tag and print it using Selenium Webdriver? I am looking to extract the text UPS Overnight - Free The HTML code is as follows: div id="customSelect_3" class="select_wrapper">> <div class="select ...

javahtmlseleniumselenium-webdriver

Leverage JavaScript to customize the appearance of existing links within an external HTML document

Forgive me for my lack of expertise in Javascript. I will do my best to explain clearly. On my website, I have an external html file for the navigation menu that is loaded with javascript to simplify editing (so I don't need to update nav elements on ...

jquerycsshyperlinknavigationexternal

How to achieve an endless cycle using Promise recursion in a NodeJS environment

I am planning to replace my blocking infinite while loop with promises. My run function is quite simple - it lights up an LED and then turns it off before moving on to the next one. Since Promises do not work inside while loops, I'm exploring how I c ...

javascriptnode.jsrecursion

Convert JSON data from jQuery into a modal form within a div element

I am currently working on an MVC application and attempting to populate a bootstrap modal form with data from the server. My approach involves: 1) Loading a grid with various IDs, each linked to a javascript onclick function. 2) The function retrieves th ...

jqueryhtmlajax

Using discord.js does not allow line breaks in embed descriptions

const chatRoom = replyOptions.getRoom("room"); const header = replyOptions.getHeader("header"); const content = replyOptions.getContent("text"); const chatEmbed = new MessageEmbed() .setColor('DARK_VIVID_PURPLE') ...

javascriptnode.jsdiscorddiscord.js

Include money symbols within input fields with padding and vertical alignment

I am looking to create an input field that includes either € or $ currency symbols. The challenge is ensuring perfect vertical centering inside the input, especially when using padding. Is there a foolproof method to achieve this? https://i.stack.imgur ...

htmlcss

Encountered an issue retrieving audio during recording with Recorder.js

I've come across a scenario where I'm utilizing the Recorder.js Demo for recording audio. Interestingly, it works perfectly on Linux but encounters an issue when used on Windows. A pop-up alert stating "Error getting audio" shows up. Here's ...

javascriptjqueryaudio-recordingrecorder.js

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

htmlcsstwitter-bootstrap

Improving the innerHTML syntax

I am looking for the correct syntax to add content to an element using innerHTML. Here is an example that isn't working as expected: openNewWindow: function(content) { popupWin = window.open(content, 'open_window', 'menubar, ...

javascriptinnerhtml

What is the best method for retrieving options based on a data attribute?

All <option> elements in a <select> have data-value attributes set (example provided below). Upon page load, I must find and iterate through the values of all <option> elements to pick out one that suits further processing. We plan on us ...

javascriptjqueryhtml

Checking if the iframe location has been modified using Jquery

Looking to determine if the location of an iframe has been modified. function checkLocation() { setInterval(function(){alert("Hello")},3000); if (document.getElementById("myiframe").src = 'http://www.constant-creative.com/login';) { } ...

javascripthtml

Position the div to the right of a left navigation bar instead of beneath it using Bootstrap 5

After using the code snippet from , I'm struggling to align content to the right of the navigation bar. It seems like a simple issue related to changes in Bootstrap 5 that I can't seem to figure out. <div class="d-flex flex-column vh-100 ...

htmlcssbootstrap-5

Creating a customized plugin in JavaScript that utilizes a local JSON/GeoJSON file

I am relatively new to Drupal and currently working on developing a custom map module. While my module functions correctly and displays the map along with relevant information, I encountered a challenge regarding calling my geojson file using a hard-coded ...

javascriptdrupalgeojsondrupal-modules