HTMLElement.inert

The HTMLElement property inert is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible.

Syntax

isInert = HTMLElement.inert;

HTMLElement.inert = true | false;

Value

A Boolean which is true if the element is inert; otherwise, the value is false.

Example

HTML

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

CSS

[inert] > * {
  opacity: .5;
}

Specifications

Browser compatibility

See also

• Inert Polyfill