Google Chrome > Textboxes > Yellow border when active..?

Question

Hey,

Ive been modifying a form today, and testing it in Chrome. I noticed that on selecting a textbox, with border: 0 or none, it still puts a yellow border around it. Does anyone know of a way to get rid of this border? I usually wouldnt be that bothered but it looks really horrible with the colour scheme I am using.

Thanks in advance.

Regards,

Richard

PS I have tried using !important too, in case something else is setting the border to yellow in the CSS.

Answer 1

If I recall, you can set outline: none; to fix this problem. Note that it will potentially reduce accessibility in some circumstances, but I agree, this style looks bad in many cases.

EDIT: just confirmed, setting the outline to none will remove this behavior in Chrome.

input[type="text"], input["type="password"] { outline: none; }

Answer 2

It's an outline, not a border; Use the outline CSS property.