Pseudo-class :popover-open CSS

Định nghĩa và cách sử dụng

CSS :popover-open Pseudo-class được sử dụng để chọn và thiết lập phong cách cho bất kỳ phần tử nào đang trong trạng thái hiển thị popup.

Mặc định, trình duyệt sẽ hiển thị popup ở giữa viewport.

Phong cách mặc định của popup trong trình duyệt là:

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

Do đó, để thay thế phong cách mặc định, bạn có thể sử dụng :popover-open pseudo-class.

Mô hình

Chọn và thiết lập phong cách cho bất kỳ phần tử nào đang trong trạng thái hiển thị 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;
}

Thử ngay

Ngữ pháp CSS

:popover-open {
  css declarations;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ pseudo-class.

Trang liên quan

Tham khảo:HTML popover 属性