13

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!

Chatyak
  • 183
  • 1
  • 1
  • 11
  • 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 `` 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 `` elements in mobile browsers"? Because if it is, you should say so. – Ry- Jul 04 '12 at 22:31
  • 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? – Chatyak Jul 04 '12 at 22:37
  • 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? – Chatyak Jul 04 '12 at 22:46
  • 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. – Ry- Jul 04 '12 at 22:51
  • 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. – Chatyak Jul 04 '12 at 22:58
  • 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. – Ry- Jul 04 '12 at 23:00

6 Answers6

7

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.

Steve Czetty
  • 6,147
  • 9
  • 39
  • 48
Nena Moss
  • 87
  • 1
  • 2
7

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

dupeng
  • 79
  • 1
  • 3
3

Use -webkit-appearance: none;

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

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

And it will do the trick.

AlexanderGriffin
  • 515
  • 2
  • 13
1
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

toniehock
  • 41
  • 1
  • 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. – Zei Jan 18 '21 at 17:00
1

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

UnpassableWizard
  • 1,237
  • 11
  • 20
  • 1
    yep. bootstrap 4 had this `box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 50%);` gotta `box-shadow: none;` – Leoncio Apr 23 '21 at 19:30
0

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476