:popover-open

Baseline 2024

Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

:popover-open は CSS の擬似クラスで、ポップオーバー要素（すなわち popover 属性のあるもの）が表示中の状態であることを表します。これを使用して、ポップオーバー要素が表示中の場合だけスタイルを適用することができます。

構文

css
:popover-open {
  /* ... */
}

例

既定では、ポップオーバーはビューポートの中央に現れます。既定のスタイルでは、UA スタイルシートでこのように実現されています。

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

既定値のスタイルを上書きして、ビューポートの他の場所にポップオーバーが現れるようにするには、上記のスタイルを次のように上書きする必要があります。

css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}

仕様書

Specification
HTML Standard
# selector-popover-open

ブラウザーの互換性

BCD tables only load in the browser

関連情報