The :fullscreen pseudo-class selects and styles an element that is being displayed in fullscreen mode.
The :fullscreen selector works when the fullscreen mode is entered.
The :fullscreen selector works with the -webkit-, -moz-, -ms- prefixes for maximum browser compatibility.
Version
Syntax
:fullscreen {
css declarations;
}
In the following example, click the button to see the element in fullscreen mode.
Example of the :fullscreen selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 10px;
height: 200px;
width: 95%;
background-color: #1c87c9;
}
.example p {
visibility: hidden;
text-align: center;
color: #eeeeee;
font-size: 3em;
}
.example:-webkit-full-screen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:-webkit-full-screen p {
visibility: visible;
}
.example:-moz-full-screen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:-moz-full-screen p {
visibility: visible;
}
.example:-ms-fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:-ms-fullscreen p {
visibility: visible;
}
.example:fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>:fullscreen pseudo-class example</h2>
<div class="container">
<div class="example" id="example">
<p>Fullscreen mode</p>
</div>
<br>
<button onclick="var el=document.getElementById('example'); el.webkitRequestFullscreen();">Click here</button>
</div>
</body>
</html>
Browser support
15.0-webkit- | 12.0+ | 64.0+ |
6.0 -webkit- |
15.0 -webkit- |
Practice Your Knowledge
What are the ways to make a webpage fullscreen as mentioned in the article from W3Docs?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.