Do not outline: no; DOES NOT WORK - Only -webkit-appearance: no; works - what's wrong here?

Question

Edit: my problems concern mobile sites.

Let me understand this. No matter what I do, outline: no; DOES NOT remove the default backlight / glow from input form elements using iPod Touch / iPhone.

Wherever I look, people say:

input:focus { outline:none; } 

or

 input { outline:none; } 

.... and that it will eliminate the glow ... well, it is not.

Another serious problem is that there is no INDICATOR. I create a blank page without styling and just entering a form, browse the page through an iOS mobile phone, and there is no glow / outline on the input elements. It is just empty.

The only thing that works is using -webkit-appearance: none; - and it just allows me to set the shadow on the input element. If I do not use appearance -webkit: none; - then the shadow of the box will not be displayed properly.

However, when viewing this on a desktop browser, shadow shadows work fine even without webkit.

So my question is: why outline: none; do not serve the purpose for input elements? I saw some people say that they only work with anchor tags, while others say that they work on input elements. Who is there? Because so far, no matter what I do, the outline is: no; useless for input elements.

Here is the JSfiddle:

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

Viewing this page on an iOS mobile device, for starters there is no “glow” or default style. Where everyone sees the default glow behavior that requires an outline: none; work (which is not the case)? It drives me crazy!

Answer 1

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

This feature is very useful when the mouse is not in use. The structure provides an important accessibility function, so please, if you remove it, add a style for the focus of links and active states. Please help users understand where links exist.

Answer 2

Try the following: -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 be a trick.

Answer 4

Mobile Safari apparently just doesn't have a default outline style, so you don't have to worry about that. However, for guaranteed consistent viewing across all browsers, on the desktop, and on mobile devices, I would recommend setting outline: none .

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

Answer 6

I used input{border: none;} and worked: D