Pseudo-clase :popover-open de CSS

Definición y uso

CSS :popover-open Las pseudo-clases se utilizan para seleccionar y configurar el estilo de cualquier elemento que esté en estado de mostrar emergente.

Por defecto, el navegador mostrará la ventana emergente en el centro de la ventana de visualización.

El estilo predeterminado de la ventana emergente en el navegador es:

[popover] {
position: fijo;
inset: 0;
width: ajustar contenido;
height: ajustar contenido;
margin: automático;
borde: sólido;
padding: 0.25em;
overflow: automático;
color: CanvasText;
background-color: Canvas;
}

Por lo tanto, para sobrescribir el estilo predeterminado, se puede usar :popover-open pseudo-clases.

Ejemplo

Elija y configure el estilo de cualquier elemento que esté en estado de mostrar emergente:

:popover-open {
  width: 150px;
  height: 150px;
  position: absoluto;
  inset: sin establecer;
  bottom: 25px;
  left: 25px;
  margin: 0;
  color: granate;
  background-color: naranja;
  font-size: 25px;
}

Prueba personalmente

Sintaxis CSS

:popover-open {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla especifican la versión del navegador que primero admite este pseudo-clase.

Páginas relacionadas

Referencia:Atributo HTML popover