:muted CSS Pseudo Class

The :muted pseudo-class in CSS is used to select media elements, typically audio and video, that are currently muted. It allows developers to style these elements differently when their sound is disabled, providing visual cues to users that the media is not producing sound. This can be particularly useful in custom media player interfaces, where muted states might need to be highlighted or indicated with specific icons, colors, or overlays.

Styling elements with :muted can involve a variety of CSS properties. For example, developers might use filter to visually dim a video or change the opacity, or border-color to highlight a muted audio track with a distinct border. While the pseudo-class itself does not change the behavior of the element, it serves as a powerful hook for UI feedback and accessibility improvements, making it easier for users to identify the state of media playback.

Here is a basic example of using :muted:

HTML

<video id="myVideo" controls muted>
  <source src="sample.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

CSS

video:muted {
  filter: grayscale(100%);
  opacity: 0.6;
  border: 2px solid red;
}

In this example, any video element that is muted will appear in grayscale with reduced opacity and a red border. This helps users immediately recognize that the video’s audio is turned off. The :muted pseudo-class is dynamic, so if a user unmutes the media via controls or scripting, the styles will automatically revert. This makes it a convenient tool for creating responsive and interactive media experiences without additional JavaScript.