CSS :popover-open Pseudo-class
Example
Select and style any element that is in a showing 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 »
Definition and Usage
The CSS :popover-open pseudo-class selects and
styles any element that is in a showing popover state.
By default, browsers displays popovers in the middle of the viewport.
The default styling of a popover 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;
}
So, to override the default styles, you can use the :popover-open
pseudo-class.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :popover-open | 114 | 114 | 125 | 17 | 100 |
CSS Syntax
:popover-open {
css declarations;
}
Related Pages
HTML Reference: popover attribute
