CSS :muted Pseudo-Class

CSS :muted Pseudo-Class

The CSS :muted pseudo-class selects media elements that are in a muted state. It can be used to change the appearance of audio and video players when their audio output is muted, although browser support is limited.

:muted Syntax

selector:muted {
  property: value;
}

The :muted pseudo-class is added directly to a media element selector without a space. It takes no arguments.

Video Example

video:muted {
  border: 3px solid #006699;
}

This rule is intended to add a blue border to a video element while it is muted.

Audio Example

audio:muted {
  opacity: 0.7;
}

This rule is intended to reduce the opacity of a muted audio player.

Class Selector Example

.media-player:muted {
  outline: 2px solid #006699;
}

This rule targets a media element with the media-player class when it is muted.

How :muted Works

The :muted pseudo-class represents media elements whose audio output is muted.

Media State

An audio or video element can have its audio output muted without stopping playback.

HTML Example

<video controls muted>
  <source src="sample-video.mp4" type="video/mp4">
</video>

The muted attribute establishes the video's initial muted state.

CSS Example

video:muted {
  border-color: #006699;
}

In a browser that implements :muted, this rule can style the video based on its muted state.

Dynamic State

The muted state can change while media is playing. A supported state-based selector can update automatically when that state changes.

Playback Is Separate

A muted media element may be playing, paused, or waiting for data. Muting does not determine its playback state.

Audio and Video Elements

The :muted pseudo-class is intended for media elements that can produce audio output.

Audio Element

<audio controls muted>
  <source src="sample-audio.mp3" type="audio/mpeg">
</audio>

An audio element can be muted while retaining its playback position.

Video Element

<video controls muted width="300">
  <source src="sample-video.mp4" type="video/mp4">
</video>

A video element can continue displaying video frames while its audio output is muted.

CSS Example

audio:muted, video:muted {
  outline: 2px solid #006699;
}

This rule is intended to highlight muted audio and video elements.

Media Controls

Native browser media controls may provide a mute button. The appearance of these built-in controls is controlled by the browser and is not fully customizable with standard CSS.

The muted Attribute

The HTML muted attribute specifies that an audio or video element should initially be muted.

HTML Example

<video controls muted>
  <source src="sample-video.mp4" type="video/mp4">
</video>

Boolean Attribute

The muted attribute is a Boolean attribute. Its presence indicates the default muted state.

CSS Attribute Selector

video[muted] {
  border: 2px solid #006699;
}

This selector matches a video element that has the muted attribute in its HTML markup.

Important Difference

The attribute selector [muted] checks whether the HTML attribute is present. It does not necessarily reflect the element's current muted state after JavaScript or the media controls change it.

Current Muted State

JavaScript can read and change the current muted state using the media element's muted property.

Changing the Muted State

JavaScript provides a reliable way to control and detect whether an audio or video element is muted.

Mute a Video

const video = document.querySelector("video");
video.muted = true;

Unmute a Video

video.muted = false;

Toggle the Muted State

video.muted = !video.muted;

Detect Changes

video.addEventListener("volumechange", () => {
  console.log("Muted:", video.muted);
});

The volumechange event fires when the media element's volume or muted state changes.

Reliable Styling Alternative

video.addEventListener("volumechange", () => {
  video.classList.toggle("is-muted", video.muted);
});

video.is-muted {
  outline: 2px solid #006699;
}

A JavaScript-managed class can provide consistent styling in browsers that do not support :muted.

Muted vs. Zero Volume

Muting media and setting its volume to zero can both produce silence, but they represent different states.

Comparison

JavaScript Example

const media = document.querySelector("video");
media.muted = false;
media.volume = 0;

This media element is not explicitly muted, but its volume level is zero.

State-Based Styling

The :muted pseudo-class represents the media's muted state rather than serving as a general test for whether sound is audible.

Browser Controls

Browsers may present zero volume and explicit muting differently in their native media controls.

:muted vs. :volume-locked

The :muted and :volume-locked pseudo-classes describe different media-related conditions.

Comparison

CSS Example

video:muted {
  border-color: #006699;
}
video:volume-locked {
  opacity: 0.7;
}

These selectors represent separate states and should not be treated as interchangeable.

Browser Support

Both pseudo-classes have limited implementation. Use supported JavaScript media APIs when reliable state detection is required.

:muted Specificity

The :muted pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

video {
  border: 1px solid #999;
}
video:muted {
  border: 3px solid #006699;
}

In a browser that supports :muted, the second rule takes precedence when both selectors match and other cascade factors are equal.

Practical Uses

The :muted pseudo-class is intended for visual feedback related to media audio state.

Muted Video Indicator

video:muted {
  outline: 3px solid #006699;
}

Highlight a video when its audio output is muted.

Muted Audio Player

audio:muted {
  opacity: 0.7;
}

Change the appearance of an audio player in a muted state.

Custom Media Interfaces

Use a visual indicator to communicate whether a media element is muted.

Video Previews

Distinguish muted video previews from videos with audio enabled.

Interactive Controls

Update a mute button's appearance when the media's audio state changes, using JavaScript when necessary.

Limitations

The :muted pseudo-class has limited browser implementation and should not be the only method used to indicate muted media.

Limited Browser Support

Browsers may not recognize or apply rules using :muted.

Not a Playback Selector

The pseudo-class does not indicate whether media is playing or paused.

Not a General Silence Detector

It does not determine whether the media contains an audio track or whether sound is audible through the user's device.

Attribute Selectors Are Different

The [muted] attribute selector checks markup rather than reliably tracking the current muted property.

Native Controls Vary

The appearance and behavior of built-in media controls differ among browsers and operating systems.

Fallback Styling Is Necessary

Use JavaScript and a class or data attribute for reliable styling when the muted state changes.

Accessibility

Users should be able to understand and control the audio state of media elements.

Provide Clear Controls

Use a clearly labeled mute or unmute button when creating custom media controls.

Communicate the State

Do not rely on color alone to indicate whether media is muted. Include visible text or an understandable icon.

Accessible Button Labels

<button type="button" aria-label="Unmute video">Unmute</button>

Update the button's label when the media state changes so the available action remains clear.

Keyboard Support

Ensure custom mute controls can be operated with a keyboard.

Captions and Transcripts

Provide captions or transcripts when appropriate so users can access spoken information without relying on audio playback.

Best Practices

• Use :muted only when browser support is appropriate for the project.
• Use the JavaScript muted property to detect and change the current mute state reliably.
• Listen for the volumechange event when synchronizing custom controls.
• Use a class or data attribute as a fallback for unsupported browsers.
• Do not confuse the muted HTML attribute with the current JavaScript muted property.
• Do not assume a volume level of zero is the same as an explicitly muted state.
• Keep mute and unmute controls accessible to keyboard users.
• Provide text or icons in addition to color-based status indicators.
• Test media behavior across browsers and devices.

:muted Example

This example uses a video element with a mute toggle button. The :muted selector demonstrates the intended CSS behavior, while a JavaScript-managed class provides a reliable fallback. The status text updates whenever the mute state changes.

HTML

<div class="muted-demo">
  <video id="demo-video" controls muted playsinline width="260">
    <source src="sample-video.mp4" type="video/mp4">
  </video>
  <button type="button" id="toggle-mute">Unmute Video</button>
  <p id="mute-status">Audio is muted.</p>
</div>

CSS

.muted-demo video {
  display: block;
  max-width: 100%;
  border: 3px solid #ccc;
}
.muted-demo video:muted, .muted-demo video.is-muted {
  border-color: #006699;
}
.muted-demo button {
  margin-top: 10px;
  padding: 8px 12px;
  border: none;
  background-color: #006699;
  color: #fff;
  cursor: pointer;
}

JavaScript

const video = document.getElementById("demo-video");
const button = document.getElementById("toggle-mute");
const status = document.getElementById("mute-status");
function updateMuteState() {
  video.classList.toggle("is-muted", video.muted);
  button.textContent = video.muted ? "Unmute Video" : "Mute Video";
  status.textContent = video.muted ? "Audio is muted." : "Audio is unmuted.";
}
button.addEventListener("click", () => {
  video.muted = !video.muted;
});
video.addEventListener("volumechange", updateMuteState);
updateMuteState();

Browser Result

Play in Editor

Note: The blue border indicates that the video is muted. The JavaScript fallback ensures the visual indicator works even when the browser does not support :muted. Use the button to change the mute state.

Browser Support

Baseline: Limited availability. The :muted pseudo-class is defined in CSS Selectors Level 4 but is not broadly implemented across major browsers. Use a JavaScript-based fallback when muted-state styling is required.

For current compatibility information, visit Can I Use? and search for :muted.

Specifications

The :muted pseudo-class is defined in CSS Selectors Level 4 as a media state pseudo-class. It represents media elements whose audio output is muted.

Selectors Level 4 - :muted