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
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

Discussion

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