---
name: ".up-focus-hidden"
area: "API"
kind: "CSS class"
parent: "up.viewport module"
visibility: "experimental"
url: "https://unpoly.com/api/up-focus-hidden"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.viewport module](https://unpoly.com/api/up.viewport.md)</nav>

# .up-focus-hidden

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

This class is assigned to elements that were [focused by Unpoly](https://unpoly.com/learn/focus.md) but should not have a [visible focus ring](https://unpoly.com/learn/focus-visibility.md).

You can use this class to [remove an unwanted focus outline](#example).

<nav aria-label="Guides">

- [Learn: Focus ring visibility](https://unpoly.com/learn/focus-visibility.md)

</nav>

## Relation to `:focus-visible` {#relation-to-focus-visible}

Unpoly will try to unset `:focus-visible` whenever it sets [`.up-focus-visible`](https://unpoly.com/api/up-focus-visible.md), but can only do so in [some browsers](https://caniuse.com/mdn-api_htmlelement_focus_options_focusvisible_parameter). Because of this the `.up-focus-hidden` class may be set on elements that the browser considers to be [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).

## Example {#example}

You may see unwanted focus rings that you inherited from a [user agent stylesheet](https://bitsofco.de/a-look-at-css-resets-in-2018/) or from a CSS framework like Bootstrap. You can remove these outlines for most mouse and touch interactions using CSS like this:

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

[By default](https://github.com/unpoly/unpoly/blob/master/src/unpoly/viewport.sass), Unpoly removes the `outline` CSS property from elements with an `.up-focus-hidden` class.

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