Why is outline:none not considered good practice?

Question

Thanks all. This was a really good discussion and clarifies a lot for me.

I'm working on an input field and want to remove the outline but people say it's a bad practice. I don't understand why. After all, different browsers have different outlines, and that gets rid of uniformity.

Without outline:

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  outline: none; }

My thinking is that to increase uniformity, it is better to get rid of the outline, but I suppose some would argue for accessibility. I could still just add a border or box shadow for accessibility, AND this would help the site look uniform across all browsers:

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  /* IMPORTANT */ box-shadow: 0px 0px 2pt 2pt #008bd1;
  outline: none; }

So I still don't understand the argument that outline: none is bad practice.

See this: http://jsfiddle.net/bCGZQ/

Edit: Both answers are good, but because of the debate sparked by the first one, I will accept it.

I have never heard that before. I like to use `border` myself — NappingRabbit, Oct 18 '13 at 17:21
Why can't you just use a custom outline? Why do you have to remove the browser-given outline and put a box shadow in its place? — BoltClock, Oct 18 '13 at 17:22
A big reason - the outline is independent of the layout, allowing elements like links to be highlighted (remember, it's not just form elements you are concerned with). A border will change the layout. Box shadows aren't fully supported and may be hard for some users to see. Somewhat related: http://stackoverflow.com/questions/3875195/google-chrome-textboxes-yellow-border-when-active/3875216#3875216 — Tim M., Oct 18 '13 at 17:23
you might check out the reasoning (though they don't say explicitly that it is "bad") in #2 here: http://sixrevisions.com/css/10-random-css-tricks-you-might-want-to-know-about/ — scrappedcola, Oct 18 '13 at 17:25
@NappingRabbit `border` doesn't allow for `border-radius` (see fiddle for example). Also see http://www.outlinenone.com @BoltClock the box shadow looks pretty good (see Bootstrap). Also, can you explain what you mean by custom outline? @Tim the border doesn't always change layout. — , Oct 18 '13 at 17:29
I'm not talking about aesthetics here, but I missed that you have a border radius which `outline` does indeed not account for. As for outlines, read up about the `outline` property. There's more to it than just `outline: none`. — BoltClock, Oct 18 '13 at 17:31
@Tim Medora: Text and box shadows don't affect layout either, although there's that issue with browser support... — BoltClock, Oct 18 '13 at 17:33

score 10 · Accepted Answer · answered Oct 18 '13 at 17:31

10

Outline is largely an accessibility feature and should be available on tabbable elements to indicate focus during keyboard navigation.

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

http://www.outlinenone.com

answered Oct 18 '13 at 17:31

isherwood

58,414
16
114
157

1

Thanks, but I didn't just get rid of the outline. I put box-shadow in its place. Is it still bad practice? – Oct 18 '13 at 17:33
No, as long as you're providing some sort of feedback or indicator when an element is focused, it's fine. It's the practice of removing `outline: none` *alone* that is frowned upon. – BoltClock Oct 18 '13 at 17:34
1

It depends on the specifics of your box shadow. Imagine that you're an elderly user with mild cataracts, for example. Are subtle box shadows going to be of any value? – isherwood Oct 18 '13 at 17:35
6

Another argument against box shadows is that not all browsers support them. So an older browser that uses `outline` but doesn't support box shadows is going to not be so great for the visually-impaired user. Supporting those browsers is a personal preference I suppose. If you're going to go so far as worrying about accessibility (I do), you probably want to support as many browsers as possible. – jsea Oct 18 '13 at 17:39
I agree with @SombreErmine. The box shadow support is definitely an issue, but I suppose border could be used as a fallback. – Oct 18 '13 at 18:08

unor · Answer 2 · 2013-10-18T22:43:57.543

Setting outline:none; is not bad.

Having no :focus style is bad.

If you remove the (typically by default provided) outline, make sure to set an alternative style (e.g. border) when focusing interactive elements. Of course the alternative has to be accessible, which may or may not be the case for box-shadow (check the contrast, have color blindness in mind, check if it’s supported for your visitors, etc.).

Simple way to test: Use the Tab key on your page. You should always be able to see what you are focusing currently. If this specific style has high enough contrast, doesn’t rely on color alone, and is supported by your visitor’s browsers, you are fine.

Folks that use `box-shadow` should also make sure it works in Windows high-contrast mode by setting a fallback `outline: transparent solid 2px;` https://blog.umairhafeez.com/better-yet-accessible-focus — Hrvoje Golcic, May 20 '21 at 13:28

Why is outline:none not considered good practice?

2 Answers2