CSS :autofill

By  on  

Autofilling HTML input elements is a frequent user action that can drastically improve user experience. Hell, we all autofill for our passwords and address information. But what control do we have when input elements have been autofilled?

To add custom CSS styles to inputs whose contents have been autofilled by the browser, you can use the :autofill pseudo-class:

input:autofill {
    border: 2px solid orange;
}

I'm really happy that browsers allow site and app developers to customize the styling of elements that have been changed by the browser. Autofill, to a degree, is an unnatural act, so signaling to that the value in an input was changed without control is important.

Since different browsers and operating systems sometimes style autofilled elements differently, :autofill is hugely beneficial!

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

  • By
    Create a Trailing Mouse Cursor Effect Using MooTools

    Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can.

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!