CSS :popover-open: style only the visible popover state

Last updated: 5 Oct 20265 min read

tutorial

The :popover-open pseudo-class matches a popover while it is showing. It is a state selector, not a command that opens the element. The HTML popover attribute and an invoker or application call determine when the popover is shown.

When to use it

A case filter menu should look like a compact floating surface only while open. Give the popover a conservative base border and background, then add a stronger shadow in the showing state. Keep the invoker a real button with a clear name and verify pointer, keyboard, touch, and dismissal behavior. The sample does not depend on a transition, so a browser that does not support advanced entry animation still presents the menu. Test nested scrolling, high zoom, a viewport edge, and another top-layer element. Do not use :popover-open as a substitute for a menu's selection state or for an accessible announcement of changed filters. An auto popover may light-dismiss; a manual popover behaves differently and needs an explicit close path. Make that distinction in HTML and behavior before choosing the visual style. If the menu needs persistent application state, CSS alone cannot supply it.

.case-filter-popover[popover] { max-inline-size: min(22rem, calc(100vw - 2rem)); border: 1px solid #58707d; background: #fff; color: #173441; padding: 1rem; }
.case-filter-popover:popover-open { box-shadow: 0 .8rem 2rem rgb(12 30 42 / 24%); }

Cost and verification

A modest shadow has a small paint cost, but repeated large blurred shadows and animated filters can become expensive. More important is placement: a beautifully styled surface can still cover its invoker or render off-screen. Test the actual positioning rule and consider the available anchor-positioning support and fallback. The browser manages popover visibility and top-layer ordering, while CSS controls presentation. Do not set display block on a hidden popover just to inspect it in a static mockup; that can misrepresent the state. Keep the popover's content readable and reachable when the enhancement selector is ignored.

Common Mistakes

Do not assume :popover-open opens the popover.
Do not use a visual open state as an accessibility announcement.
Do not confuse auto dismissal with manual popover behavior.

Connected lessons

Further rendering decisions

CSS :open: style the native open state without inventing one

css

reference

web