title: outline:none; does NOT WORK - Only -webkit-appearance:none; is working - what is wrong here?
body: <p>Edit: My concerns are for mobile websites.</p>
  
  <p>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.</p>
  
  <p>Everywhere I look, people say to use:</p>
  
  <pre><code>input:focus {
  outline:none;
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>input {
  outline:none;
  }
  </code></pre>
  
  <p>.... and that this will remove the glow.... well it doesn't.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>When viewing this on a desktop browser however, the box shadows work fine even without webkit.</p>
  
  <p>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.</p>
  
  <p>Here is a JSfiddle:</p>
  
  <p><a href="http://jsfiddle.net/QQGnj/4/show/" rel="noreferrer">http://jsfiddle.net/QQGnj/4/show/</a></p>
  
  <p>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!</p>