W3cubDocs

/Web APIs

HTMLElement: inert property

The HTMLElement property inert reflects the value of the element's inert attribute. It 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.

Note: Do not nest interactive elements or important content within elements with the inert attribute as inert content and their descendants are neither focusable nor perceivable by all users.

Value

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

Example

HTML

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

css

[inert] > * {
  opacity: 0.5;
}

Note: This attribute, by itself, will not cause any visual change to the content as displayed in the browser. In the example above, CSS has been applied so that any direct descendant of an element with the inert attribute is rendered semi-opaque.

Specifications

Specification
HTML Standard # dom-inert

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`inert`	102	102	112	No	88	15.5	102	102	112	70	15.5	19.0

Value

Example

HTML

CSS

Specifications

Browser compatibility

See also