`:volume-locked` CSS pseudo-class

Baseline Newly available

This feature works across the latest devices and browser versions. This feature might not work in older devices or browser versions. It's been available across browsers since August 2026.

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

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

Examples

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`volume-locked`	152	152	150	136	15.4	152	150	No	15.4	No	152	15.4

`:volume-locked` CSS pseudo-class

Syntax

Examples

CSS

Specifications

Browser compatibility

See also