Edit this page

up.viewport .up-focus-hidden
HTML selector

This feature is experimental. It may be changed or removed in a future version.

This class is assigned to elements that were focused by Unpoly but should not have a visible focus ring.

You can use this class to remove an unwanted focus outline.

Relation to :focus-visible

Unpoly will try to unset :focus-visible whenever it sets .up-focus-visible, but can only do so in some browsers. Because of this the .up-focus-hidden class may be set on elements that the browser considers to be :focus-visible.


You may see unwanted focus rings that you inherited from a user agent stylesheet or from a CSS framework like Bootstrap. You can remove these outlines for most mouse and touch interactions, using CSS like this:

:focus:not(:focus-visible, .up-focus-visible),
.up-focus-hidden {
  outline: none !important;

By default Unpoly removes an outline CSS property from elements with an .up-focus-hidden class.


CSS frameworks might render focus rings using properties other than outline. For example, Bootstrap uses a box-shadow to produce a blurred outline.