:volume-locked | CSS Selectors & Pseudo-classes

An experimental pseudo-class that targets audio or video elements that are currently 'locked' from being muted or having their volume changed (often seen in certain accessibility contexts).

Quick example

video:volume-locked {
  /* provide haptic or visual feedback if the user tries to change the volume */
  outline: 2px solid orange;
}

:volume-locked Browser Support

Limited availability 13% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

15.4+