This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.

/* Selects any <div> that is being displayed in fullscreen mode */
/* Implemented in Firefox, WebKit/Chrome, and Edge/IE using prefixes;
   Edge also supports the non-prefixed version */
div:-moz-full-screen {
  background-color: pink;

div:-webkit-full-screen {
  background-color: pink;

div:fullscreen {
  background-color: pink;

Note: The W3C spec uses the single word :fullscreen—without a dash—but both the WebKit and Gecko experimental implementations use a prefixed variant with two words separated by a dash: :-webkit-full-screen and :-moz-full-screen, respectively. Microsoft Edge and Internet Explorer use the standard convention: :fullscreen and :-ms-fullscreen, respectively.





<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p>This text will become big and red when the browser is in fullscreen mode.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>


#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;

#fullscreen:fullscreen > h1 {
  color: red;

#fullscreen:fullscreen > p {
  color: darkred;

#fullscreen:fullscreen > button {
  display: none;


Click here to try out this example.


Specification Status Comment
Fullscreen API
The definition of ':fullscreen' in that specification.
Living Standard Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support15112



11 -ms- ?61
Select all elements in the fullscreen stack ?124311 ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes



No No ?
Select all elements in the fullscreen stack ? ? Yes ? ? ? ?

1. Supported as -webkit-full-screen.

2. Supported as -moz-full-screen.

3. From version 47: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

 Last updated by: fscholz,