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.

Answer 1

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

Answer 2

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.