Pseudo-kelas :popover-open CSS

Definisi dan penggunaan

CSS :popover-open Pseudo-kelas digunakan untuk memilih dan menata gaya bagi setiap elemen yang berada dalam keadaan menampilkan popup.

Secara default, browser akan menampilkan popup di tengah jendela tampilan.

Gaya default untuk popup di browser adalah:

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

Untuk menutupi gaya default, dapat digunakan :popover-open Pseudo-kelas

Contoh

Pilih dan atur gaya bagi setiap elemen yang berada dalam keadaan menampilkan popup:

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

Coba sendiri

Sintaks CSS

:popover-open {
  deklarasi css;
}

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-kelas ini sepenuhnya.

Halaman terkait

Referensi:Atribut HTML popover