:muted CSS pseudo-class
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
The :muted CSS pseudo-class selector represents an element that is capable of making sound, such as <audio> or <video>, but is muted (forced silent).
Muted is different from :volume-locked in that the page author has control over whether a media element can be muted or un-muted.
User agents may set media muted value according to use 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 because of an operating system or user agent preference.
Syntax
:muted {
/* ... */
}
Examples
HTML
The muted attribute is added to the <video> element so that the sound is muted, this works the same for <audio> elements.
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
controls
muted
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="620">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="https://archive.org/details/BigBuckBunny_124">download it</a>
and watch it with your favorite video player!
</video>
CSS
If the <video> element is muted then a red outline is drawn around it, when it is not muted then it has a green outline. Try toggling the mute icon in the controls to see the state change.
video:muted {
outline: 5px solid red;
}
video:not(:muted) {
outline: 5px solid green;
}
Specifications
| Specification |
|---|
| Selectors Level 4 # selectordef-muted |
| HTML # selector-muted |
Browser compatibility
See also
:buffering:paused:playing:seeking:stalled:volume-locked- CSS selectors
mutedproperty ofHTMLMediaElementobjects