CSS :popover-open Pseudo-Klasse

Definition und Verwendung

CSS :popover-open Pseudo-Klassen werden verwendet, um das Stil von jedem Element, das sich im angezeigten Popover-Status befindet, auszuwählen und zu setzen.

Standardmäßig wird der Popup in der Mitte des Viewports angezeigt.

Die Standardstile für Popups im Browser sind:

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

Um den Standardstil zu überschreiben, kann man verwenden :popover-open Pseudo-Klassen.

Beispiel

Wählen und setzen Sie das Stil von jedem Element, das sich im angezeigten Popover-Status befindet:

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

Versuchen Sie es selbst

CSS-Syntax

:popover-open {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die diesen Pseudo-Klassen vollständig unterstützt.

Verwandte Seiten

Referenz:HTML Popover Eigenschaft