outline:none; does NOT WORK - Only -webkit-appearance:none; is working - what is wrong here?
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
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.