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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 -webkit[1] 12 9.0 (9.0)-moz[1]
47.0 (47.0)[2]
11 -ms[3] ? 6.0 -webkit[1]
Select all elements in the fullscreen stack ? 12 43 (43) 11 ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 9.0 (9.0)
47.0 (47.0)[2]
No support No support No support
Select all elements in the fullscreen stack ? (Yes) 43.0 (43) ? ? ?

[1] Both the WebKit and Gecko prefixed versions have a dash between full and screen, but the W3C proposal uses one single word: :fullscreen, :-webkit-full-screen, :-moz-full-screen.

[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) implements the unprefixed pseudo-class behind the preference full-screen-api.unprefix.enabled, defaulting to false.

[3] Internet Explorer uses the prefix -ms but does not have a dash between full and screen: :-ms-fullscreen.

See also

Document Tags and Contributors

 Last updated by: mfluehr,