After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers:
$('input').each(function() {
var $this = $(this);
$this.after($this.clone()).remove();
});
However, executing this code in the window load event is not effective; autofill occurs sometime after that. Currently, I am using a 100ms delay as a temporary solution:
// Eliminate autofill styles
$(window).on({
load: function() {
setTimeout(function() {
$('.text').each(function() {
var $this = $(this);
$this.after($this.clone()).remove();
});
}, 100);
}
});
This approach works reliably even on slower systems, but it lacks elegance. Is there a dependable event or check that can be made to determine if autofill has finished, or a universal method to completely override its styles?