Pseudo-classe :popover-open CSS

Définition et utilisation

CSS :popover-open Les pseudo-classes sont utilisées pour choisir et définir le style de n'importe quel élément en état d'affichage de la popover.

Par défaut, les navigateurs affichent les popups au centre de la fenêtre de visualisation.

Le style par défaut des popups dans les navigateurs est :

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

Ainsi, pour couvrir le style par défaut, vous pouvez utiliser :popover-open pseudo-classe.

Exemple

Choisissez et définissez le style de n'importe quel élément en état d'affichage de la popover :

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

Essayez-le vous-même

Grammaire CSS

:popover-open {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette pseudo-classe.

Pages associées

Référence :Attribut popover HTML