:muted CSS Pseudo Class
Description
The CSS :muted pseudo-class selector represents an element that is capable of making sound, such as an <audio> or <video> element, 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.
The :muted pseudo-class can be used to style muted media elements differently than unmuted media elements. For example, you could use it to make muted media elements less visually prominent, or to display a message indicating that the media is muted.
Here is an example of how to use the :muted pseudo-class to style muted video elements:
video:muted {
opacity: 0.5;
filter: grayscale();
}
This will make muted video elements 50% transparent and grayscale.
The
:muted pseudo-class is a relatively new CSS feature, and it is not supported by all browsers yet. However, it is becoming increasingly popular, and it is a good idea to start using it now to ensure that your website looks good in all browsers.<
Syntax
:muted {
/* ... */
}
Example
No example, see css tab for code example.:muted {
outline: 5px solid red;
}
video:muted {
outline: 5px solid blue;
}Browser Support
The following table will show you the current browser support for the CSS :muted pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| x | x | x | x | 15.4 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| x | x | x | 15.4 | x | x |
Last updated by CSSPortal on: 1st October 2023