:fullscreen CSS Pseudo Class
Description
The :fullscreen pseudo-class in CSS is used to target an element when it is displayed in full-screen mode. This class is typically used with the ::backdrop pseudo-element to style the backdrop behind the full-screen element.
For example, you can use :fullscreen to apply styles to an element when it's in full-screen mode, like changing its background color or text color. Here's a simple example of how it might be used:
:fullscreen {
background-color: black;
color: white;
}
In this example, when an element enters full-screen mode, it will have a black background with white text. This can be especially useful when you want to customize the appearance of content when it takes up the entire screen, such as in a video player or presentation mode.
Syntax
:fullscreen {
/* ... */
}
Example
<div class="container">
<p><em>Click the button below to enter the element into fullscreen mode.</em></p>
<div class="element" id="element">
<p>I'm in fullscreen mode!</p>
</div>
<br>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>
</div>em {
font-size: 0.9em;
}
.container {
width: 90%;
}
.element {
padding: 20px;
height: 100px;
width: 100%;
background-color: #7ef3d1;
}
.element p {
visibility: hidden;
text-align: center;
color: white;
font-size: 3em;
}
.element:-webkit-full-screen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:-webkit-full-screen p {
visibility: visible;
}
.element:-moz-full-screen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:-moz-full-screen p {
visibility: visible;
}
.element:-ms-fullscreen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:fullscreen p {
visibility: visible;
}Notes
Internet Explorer supports the pseudo -class: -ms-fullscreen.
Chrome, Opera, Safari support the pseudo -class: -webkit-full-screen.
Firefox supports the pseudo-class : -moz-full-screen.
Pseudo-classes for each browser should be written separately, but not separated by commas.
Browser Support
The following table will show you the current browser support for the CSS :fullscreen pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 71 | 64 | 58 | 6 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 71 | 64 | 50 | x | 10 | 71 |
Last updated by CSSPortal on: 1st October 2023