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>