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.
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.