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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 15
Alternate Name
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Edge Full support 12Firefox Full support 64
Full support 64
Full support 47
Disabled
Disabled 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.
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: :-moz-full-screen
IE Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Requires the vendor prefix: -ms-
Opera ? Safari Full support 6
Alternate Name
Full support 6
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 64
Full support 64
Full support 47
Disabled
Disabled 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.
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: :-moz-full-screen
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
Select all elements in the fullscreen stack
Experimental
Chrome ? Edge Full support 12Firefox Full support 43IE Full support 11Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also