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

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