Chrome Autofill CSS in classic 5.1

[btyrell]

In classic 5.1 default CSS, the textbox titles will cover the contents of the textbox if they are filled in via Chrome autofill. The title will stay like this until the page is interacted with.

To fix this, I added some lines to Default_Modern_Desktop.js in a ready() function which will parse all textboxes on the page for the internal autofill CSS property: ":-internal-autofill-selected". If this property is found, it will toggle the "field-active" class of the textbox which moves the title to its normal position. This can be used with textboxes with different styling on them, but the code will need to be changed to match the CSS classes that are used.

Code: Select all

setTimeout(() => {
	var textboxes = document.getElementsByClassName('text-field-wrap');
	for (var i=0; i<textboxes.length; i++) {
		if (textboxes[i].getElementsByTagName('input')[0].matches(':-internal-autofill-selected')) {
			textboxes[i].classList.toggle('field-active');
		}
	}
}, 500);

This solution isn't foolproof given the 500ms timeout, but it will work in most cases.