Google Chrome form autofill and its yellow background

Autofill state handling

CSS pseudo-classes can come quite handy when you want to juggle between autofill states. The transition property, along with -webkit-text-fill-color helps maintain a consistent, smooth and readable autofill design across various states:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    transition: background-color 5000s ease-in-out 0s; /* "Ease-in-out? More like Ease-out-the-yellow!" */
    -webkit-text-fill-color: #000 !important;
}


In plain English, this ensures that your autofill color transitions smoothly whilst catering for a readable input text.

Adapting to your audience: Chrome-specific customization

JavaScript's navigator.userAgent property comes handy here. If you're interested in applying CSS overrides or JavaScript maneuvers to only Chrome users, here's how you do it:

if (navigator.userAgent.indexOf("Chrome") != -1) {
    // Chrome user? Cool, let's play around!
}


Keep in mind, depending entirely on user agent strings could lead to unforeseen issues, especially given their fickle nature.

Accessibility matters

Enhancement in design shouldn't come at the cost of user experience. Making your modifications autofill-conscious will help the users who rely on this feature:

Expert hacks and trips for seamless design

Consider turning off Chrome's autofill

You can use the autocomplete="off" attribute to disable autofill although it might come across as overkill and is generally not recommended:

<input type="text" name="field" autocomplete="off">


Modern browsers may choose to ignore this as a measure to preserve user preferences.

Targeted style removal on load

JavaScript or jQuery can be used to handle autofill styles on load events for an immediate fix, add the following to your script:

$(window).load(function(){
    // Autofill? Consider it dealt with!
});


In addition, input elements can also be duplicated:

$('input').each(function(){
    if ($(this).is(':autofill')) {
        $(this).clone(true, true).insertBefore(this).prev().add(this).toggle(); // Element cloning: The Attack of the Clones!
    }
});


This script replaces autofilled elements with clean ones, while preserving function over form.

Unshield your transitions

The transition property can ease the sudden implementation of autofill, hence making over the website design less jarring:

input:-webkit-autofill {
    transition: background-color 0.5s ease-out, color 0.5s ease-out; /* "Smooth operator"


Smooth transitions of both color and background-color results in a more seamless change, ultimately giving your users a sublime experience.

Cross-browser testing

Ensure whatever you come up with works elegantly across various browsers. What's "chic" in Chrome, might not even show up in Firefox. Creating consistent behavior is ideal to avoid nibbling at the user experience.