Pattern: removing yellow autocomplete highlight from google toolbar


you have site designed in a dark theme, saying dark background, white font.

By default google toolbar autocomplete cracks html for inputs or selects containg "email" "name" "address" and other buzzwords and changes background to yellow. As a result when visitor fills form, he enters text as white on yellow and can not easy validate his input

What to do?

For some reasons usually people try to fix this with javascript : for example Scripts are initializing on document.load, enumarate all inputs and selects in the document and change background style to default one

When I first spotted this problem, I thought that javascript is the only cure, because toolbar was inserting style="background:yellow" directly into input. According to CSS rules such styles can not be overwritten with css, but

Answer is pretty simple:

For problematic inputs specify background in the css style with the important attribute, for example:

background-color: #0F333F !important;

Mystery! Input is not highlighted with yellow color. In my opinion toolbar checks css setup of element. In case if the background is important in style file - this input is not cracked by toolbar. That's all workaround