1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. :volume-locked

:volume-locked CSS pseudo-class

Baseline 2026
Newly available

Since August 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Want more browser support for this feature? Tell us why.

The :volume-locked CSS pseudo-class selector represents an element that is capable of making sound, such as <audio> or <video>, but the audio volume of the media element is currently "locked" by the user.

User agents may set media muted or volume values according to user preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise). An element that is :volume-locked cannot be muted, un-muted, or have its volume changed via JavaScript. The locked status is an operating system or user agent preference.

Syntax

css
:volume-locked {
  /* ... */
}

Examples

CSS

css
:volume-locked {
  border: 5px solid green;
}

video:volume-locked {
  border: 5px solid aqua;
}

Specifications

Specification
Selectors Level 4
# selectordef-volume-locked
HTML
# selector-volume-locked

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content