CSS outline best practices [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
There has been some controversy regarding the practice of doing the following:
a, input, textarea, button {
outline: none;
}
Accessibility issues are a common concern.
It is not my intention to remove this feature altogether (as the code above does); however, this feature greatly messes with my original design by adding unintended borders (erm, outlines?) in unwelcome areas.
The main problem is that these outlines actually follow the rectangular area around the element, not its contour (i.e. it ignores border radius, etc.).
Example:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
The only solution of which I am aware is to have the above code running and employ my own system.
What are the best practices when taking this approach?

Answer 1

Indeed. An outline is around the rectangular area on the outside of the border. It doesn't take rounded corners into account.
There's nothing wrong with disabling the outline, just make sure you add some other accessibility feature for people using the keyboard, for instance, change the color of your background on focus:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
outline: 0;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
input:focus {
border-color: #999;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>

Answer 2

As many form elements, the button element has different renderings in browsers, and as many fixes are needed...
http://fvsch.com/code/button-css/ from F. Verschelde should let you outline buttons around the whole element and not around its content.