CSS :popover-open pseudo-class

Definition and usage

CSS :popover-open Pseudo-classes are used to select and set the styles for any element in the displayed popover state.

By default, browsers will display popups in the middle of the viewport.

The default style of popups in browsers is:

[popover] {
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 0.25em;
overflow: auto;
color: CanvasText;
background-color: Canvas;
}

Therefore, to override the default style, you can use :popover-open Pseudo-class.

Example

Select and set the styles for any element in the displayed popover state:

:popover-open {
  width: 150px;
  height: 150px;
  position: absolute;
  inset: unset;
  bottom: 25px;
  left: 25px;
  margin: 0;
  color: maroon;
  background-color: orange;
  font-size: 25px;
}

Try it yourself

CSS syntax

:popover-open {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version to fully support this pseudo-class.

Related pages

Reference:HTML popover attribute