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!

Hammerfest

The default glow behaviour isn't on Mobile Safari, it's on Safari (and Chrome, and other browsers). So no, it isn't worthless on <input> elements. And since you see no glow to begin with, why is your question "why does it have no effect?" It has no effect because there's no outline in the first place, like you say. So is this a rant, or is your actual question "why doesn't box-shadow work on <input> elements in mobile browsers"? Because if it is, you should say so. – Imprimis

I was unaware that the glow behavior was not in Mobile Safari. I have been trying to find such info but did not know where to look. That will explain a great deal of frustration then. So in other words, using the outline:none; for mobile applications is worthless on input elements, however for desktop sites it serves a purpose? – Hammerfest

To further clarify - the only thing I should be doing then for mobile website desing on form elements, is adding -webkit-appearance:none; (along with -moz-appearance etc..) to remove all default styling.... or another way of saying it... outline:none; serves no purpose for form elements on mobile browsers? – Hammerfest

I don't know, I don't have all the mobile devices to test it on. To play it safe, just add outline: none anyway. If it turns out you don't need it, go ahead and take it out. – Imprimis

Thank you for your help. How do I give you the credit for the answer - and also, where would I find out the information you posted? As in, how would I know where to look to find out that Mobile Safari doesn't have the glows. – Hammerfest

I suppose I can post it as an answer. As for finding out where, you pretty much just have to try it. I've never seen anything about browser default styles documented anywhere. – Imprimis

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.

Mouton

Answer 2

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

Olaolaf

Answer 3

Use -webkit-appearance: none;

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

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

And it will do the trick.

Orpington

this works with :) .classNameYo { -webkit-appearance: none; outline: none; } Using it with Apache Cordova app. – Snowwhite

sorry but isn't it what the question title says? – Spiros

the question title was edited after the related comment was made - this post is three years old. – Orpington

Answer 4

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

Daiquiri

Firstly, it is bad for accessibility to remove outlines on everything. However, it is necessary in some cases. More importantly, you can remove the outline on specific items by adding the !important tag to the base class. For example button { outline: none !important; }. Easier than messing around with pseudo classes. – Liverpudlian

Answer 5

In my case in Magento2 it was a border and box-shadow, instead of these things above.

Oona

yep. bootstrap 4 had this box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 50%); gotta box-shadow: none; – Ionic

Answer 6

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.

Imprimis