CODEWITHSUNDEEP
htmlcssbrowser
haagel
haagel

Reputation: 2726

How is the default focus outline implemented in browsers?

How is the default focus outline implemented in browsers?

I'm talking about the solid or dotted line border that is shown around the element that currently has focus.

I thought that it was just CSS outline applied by the browser, such as

:focus {
    outline: black dotted 1px;
}

But I've noticed that if I try to customize the focus outline by using CSS, the look of it is changed but so is the behavior in some cases.

Please see my question regarding focus outline for links with divs inside for examples:

Custom focus outline for links with div inside

(In short, if you have link with complex content and apply your own focus outline, things get weird)

Obviously the browsers don't just only apply the simple CSS above for focus outline. They must do something more to make the default work as good as it does, regardless of the element that it is applied to.

Does anyone know how it works?

Can I do something to make my custom focus outlines behave the same as the default ones?

Upvotes: 1

Views: 2831

Answers (2)

Itzwork
Itzwork

Reputation: 31

The answer of @loikein works well!!! but this isn't supported by IE11.
The solution to fix this issue and support also for IE11 is:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     outline-color: #666;
     outline-style: dotted;
     outline-width: 1px;
}
outline: medium auto currentColor;
outline: medium auto invert;
outline: 5px auto -webkit-focus-ring-color;

The @media is only for IE11 and the other options for the other browsers as @loikein wrote. (For example: outline: medium auto currentColor - for firefox)

Upvotes: 0

loikein
loikein

Reputation: 169

This qustion is fairly old, but I bumped into it several times when searching about outline that I want to try answering.

According to outline - CSS: Cascading Style Sheets | MDN, there are three parts to the declaration of an outline: colour, style and width, and the default values are:

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
}

and according to another SO answer, WebKit browsers have their own outline style, which makes my whole answer:

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
    outline: 5px auto -webkit-focus-ring-color;
}

Notes:

  1. medium in my Safari is rendered as 3px, which is, obviously, not 5px.
  2. the colour -webkit-focus-ring-color is rendered as rgb(0, 103, 244).

Upvotes: 2

Related Questions