For background see http://enndeakin.wordpress.com/2009/10/05/visible-focus-rings/ https://bugzilla.mozilla.org/show_bug.cgi?id=418521 To sum it up we need a way to differentiate how an element was focused. The focusring pseudo class should be the platform specific pseudo class that we use to show the focus outline.
This has been added to the CSS Selectors draft as the :focusring pseudoclass https://github.com/w3c/csswg-drafts/pull/709
The name of the pseudoclass has changed in the meantime to :focus-visible. Sources: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo https://caniuse.com/#feat=css-focus-visible https://bugzilla.mozilla.org/show_bug.cgi?id=1445482
:focus-visible was added to Chrome 86. Blog post: https://blog.chromium.org/2020/09/giving-users-and-developers-more.html I checked in on this as I am building a menu where it would be desirable to remove focus outline styles on an element, but allow for focus outline styles to persist in a condition matching that of :focus-visible.
:focus-visible was added in the recently-release Firefox 85. Blog post: https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/ With both Chrome and Firefox supporting this feature, I am hopeful that this can be implemented in to WebKit as well.
:focus-visible works as expected on Safari 14.0.3, just make sure to have the accessibility settings setup. For Mac, select "Preferences -> Advanced", and enable checkmark for: [V] : Press Tab to highlight each item on a web page By default, this is disabled. If you tab through a page in safari, by default it will skip buttons, but it will go to input fields. With this option enabled, it will also go through buttons and other tabbable items.
re: Justus: ":focus-visible works as expected on Safari 14.0.3, just make sure to have the accessibility settings setup." You are referring to the :focus pseudo-class, not the :focus-visible pseudo-class. You may review documentation for what :focus-visible is and does on this page: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible . As is said there, :focus-visible "...is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard)." This is in contrast to :focus, which is set on an element whether it was selected via tabbing on the keyboard, or by way of clicking with a mouse. You can see for yourself that Safari/WebKit do not support the :focus-visible pseudo-class: There is also an Example on the page in which you can test tabbing from one input to button to the next — Safari does not show the dashed dark orange outline that comes from :focus-visible styles as it does in Chrome and Firefox.
Indeed I see now I made a mistake. The behaviour we were implementing for our UI actually wants default outlines only on focus-visible, but it seems that Safari, with that setting enabled, does that for you (e.g., when tabbing to a button, shows an outline, whilst clicking a button does not) so I wrongly assumed this means the pseudo selector works. But this is by accident just the default behaviour when you opt-in with the accessibility option. Sorry!
(In reply to Justus Romijn from comment #7) > Indeed I see now I made a mistake. > > The behaviour we were implementing for our UI actually wants default > outlines only on focus-visible, but it seems that Safari, with that setting > enabled, does that for you (e.g., when tabbing to a button, shows an > outline, whilst clicking a button does not) so I wrongly assumed this means > the pseudo selector works. But this is by accident just the default > behaviour when you opt-in with the accessibility option. Sorry! Hey no worries! I just wanted to make sure it is clear to all that :focus-visible is unique, and can be very useful. Indeed, earlier this morning I learned via the MDN article linked that the browser does this by default on button elements. This is good to know! Re: :focus-visible, I am eager for the myriad possibilities that open up both for other types of elements — anchors, input fields, and more — and also for the creation of more helpful and dynamic focus styles that are aware of the input method. I am a sighted user, but I do try to use my ergonomic keyboard as much as I can (vs. my mouse; both for ergonomics, and for speed), so I am familiar with, and do tend to recommend turning on the macOS setting to allow keyboard navigation to move focus between controls. :focus-visible would be a great tool for making more intuitive and accessible interfaces.