inert

The HTMLElement property inert is a Boolean 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 1</label>
  <button id="button2">I am inert</button>
</div>

CSS

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

Note that the 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 Status Comment
HTML Living Standard
The definition of 'HTMLElement.inert' in that specification.
Living Standard

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
inertChrome Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Full support 79
Disabled
Full support 79
Disabled
Disabled From version 79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled).
Firefox Full support 81
Disabled
Full support 81
Disabled
Disabled From version 81: this feature is behind the html5.inert.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47
Disabled
Full support 47
Disabled
Disabled From version 47: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled).
Safari No support NoWebView Android No support NoChrome Android Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 81
Disabled
Full support 81
Disabled
Disabled From version 81: this feature is behind the html5.inert.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled).
Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

See Also