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!
Responsive and Infinitely Scalable JS Animations
Back in late 2012 it was not easy to find open source projects using
requestAnimationFrame()– this is the hook that allows Javascript code to synchronize with a web browser’s native paint loop. Animations using this method can run at 60 fps and deliver fantastic…
5 HTML5 APIs You Didn’t Know Existed
When you say or read “HTML5”, you half expect exotic dancers and unicorns to walk into the room to the tune of “I’m Sexy and I Know It.” Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature…
Highlighter: A MooTools Search & Highlight Plugin
Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The…
Duplicate the jQuery Homepage Tooltips Using Dojo
The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here’s how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage — no changes. The CSS The above CSS has been slightly modified to match the CSS rules already…
Source link
