outline:none; does NOT WORK - Only -webkit-appearance:none; is working - what is wrong here?

Question

Edit: My concerns are for mobile websites.

Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone.

Everywhere I look, people say to use:

input:focus {
outline:none;
}

or

input {
outline:none;
}

.... and that this will remove the glow.... well it doesn't.

Another major problem is that there IS NO DEFAULT GLOW. I create a blank page with no styling and just a form input, view the page via IOS mobile, and there is no glow/outline on the input elements... it is just blank.

The only thing that works is using -webkit-appearance:none; - and that simply allows me to set a box-shadow on the input element. If I am not using the -webkit-appearance:none; - then the box shadow will not show properly.

When viewing this on a desktop browser however, the box shadows work fine even without webkit.

So my question is: why does outline:none; serve no purpose on input elements? I have seen some people say they only work on anchor tags, yet others say they work on input elements. Who is right here? Because so far, no matter what I do, outline:none; is worthless on input elements.

Here is a JSfiddle:

http://jsfiddle.net/QQGnj/4/show/

Viewing this page on iOS mobile, there is no "glow" or default styling to begin with. Where is everyone seeing the default glow behavior which requires outline:none; to work (which it doesn't)? This is driving me mad!

Answer 1

If you use outline:none; please add a focus style. See http://outlinenone.com/.

This feature is very helpful when a mouse isn't used. Outline provides an important accessibility feature, so please, if you must remove it, add back a style for your links focus and active states. Please help users understand where links exist.

Answer 2

Try with this: -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Answer 3

Use -webkit-appearance: none;

#yourElement:focus {
    -webkit-appearance: none;
}

#yourElement:hover {
    -webkit-appearance: none;
}

And it will do the trick.

Answer 4

Mobile Safari apparently just doesn't have a default outline style, so you don't have to worry about it. For a guaranteed consistent look in all browsers, desktop and mobile, I would recommend setting outline: none anyways, though.

Answer 5

a, :visited{ 
    outline: 0;
    outline: none;
}
:hover, :active, :focus{
    outline: 0;
    outline: none;
}

removed the focused glow for me on Chrome/osx, iphone/mobile safari, firefox/osx http://jsfiddle.net/toniehock/QQGnj/6/show