CSS outline best practices

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?

score 9 · Accepted Answer · edited Jan 04 '19 at 12:23

9

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>

edited Jan 04 '19 at 12:23

gfullam

11,531
5
50
64

answered Feb 14 '12 at 10:04

Madara's Ghost

172,118
50
264
308

3

+1 - but one caveat; make sure your replacement is visible enough. Replacing a light gray border with a slightly darker border will be quite hard for some folks to tell apart. While you can see the color changing, once the control has focus (in this example) it doesn't "look focused". So you need to take the the overall page design into account, so that you provide a consistent style of focus highlighting across the page/site and that the currently focused item is visually apparent and stands out sufficiently from the non-focused items. – BrendanMcK Feb 15 '12 at 00:10
1

Indeed, it was only an example, but yes, you should make the change obvious @ChristianSciberras. – Madara's Ghost Feb 15 '12 at 07:16

score 0 · Answer 2 · answered Feb 16 '12 at 19:10

0

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.

answered Feb 16 '12 at 19:10

FelipeAls

21,711
8
54
74

CSS outline best practices

2 Answers2