MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

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.

Syntax

:fullscreen

Example

HTML

<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>
</div>

CSS

#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;
}

Results

Click here to try out this example.

Specifications

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support15112

92

473

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

92

473

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,