PDA

View Full Version : Resolved Turning off/overriding Browser's Autocomplete Highlighting



ShaneC
Jan 12th, 2011, 03:15 AM
Hello all,

If you've ever used Chrome (and I believe this happens in other browsers), whenever you select a field it highlights the field with a very annoying border. For styling, this looks terrible.

I noticed websites like Facebook have somehow found a way to override this, so that no pesky box appears. After diving into their source, inspecting elements, CSS files, and googling, I haven't figured it out so, I turn to you.

The closest thing I found was on this page: http://efreedom.com/Question/1-2338102/Override-Browser-Form-Filling-Input-Highlighting-HTML-CSS

However the methods didn't work.

Right now I'm testing everything locally, however I would think because this is a more generic question (and not one necessarily related to my layout) I didn't need to post it. If, however, you do need the layout I will do my best to upload it.

Here also is a screenshot of the problem, in case I wasn't clear:
http://img42.imageshack.us/img42/6831/grrrza.jpg

Thanks for any help you can provide!

Apostropartheid
Jan 12th, 2011, 03:18 AM
I'm certain it's contained within the :focus pseudoclass, though I'm not sure exactly what code you would use to neutralise it (though it's probably some sort of outline).

ShaneC
Jan 12th, 2011, 03:22 AM
I'm certain it's contained within the :focus pseudoclass, though I'm not sure exactly what code you would use to neutralise it (though it's probably some sort of outline).

Bingo, the following did the trick:



input.field:focus {
outline: 0px;
/* Rest of my CSS styling... */
}


Many thanks (tragically the form only allows me to issue one, though)!