Mobile website input box outlines: DESTROY!

Something that took me a while to figure out:

chrome_input_focus_border

The orange border around this input box only appears on focus, on mobile devices. It took a while longer to notice that it’s only on mobile Chrome too.

I understand that it’s a valuable inclusion for small screens where you’d like to know where your cursor or other input is actually being passed to, but if you wanted something other than the orange border, or to remove it entirely, trawling through your css for any reference to “border” or orange-y hex values can be a pain.

All you need to do is – for the element in question:

:focus {outline:none;}

Annnnnd relax.