CSS Only Snippets — Free HTML CSS JS Zero-JavaScript CSS Components

Every snippet under this tag ships with no JavaScript whatsoever. Floating labels, accordions, tooltips, dropdowns, tabs, toggles, loaders and reveal effects, built from :checked, :focus-within, :has(), sibling combinators and the details element.

That constraint buys real things: nothing to hydrate, nothing to break when a bundle fails, and behaviour that works before the page is interactive. It also buys accessibility almost for free, because the state lives in native form controls that assistive technology already understands.

The checkbox hack, and why it still works

A hidden checkbox paired with a <label> as the visible control gives you toggleable state with zero script: the label's click toggles the checkbox's :checked state, and a sibling combinator styles whatever should change in response. It predates every modern CSS selector on this list and remains genuinely useful, because unlike a div with a click handler, the resulting control is keyboard-operable and screen-reader-understood the moment it exists.

:has() turns CSS into a parent-aware language

Before :has(), CSS could only style based on an element's own state or its ancestors' — never react to what a descendant was doing. A form container with :has(:invalid) — or a card with :has(.badge) — lets a parent's appearance change based on its children's state with no listener at all, which is why several form-validation-styling patterns in this tag needed JavaScript until browser support caught up, and no longer do.

<details> as a free accordion

The <details>/<summary> pair is a fully native disclosure widget: click to open and close, keyboard-operable by default, and exposed to assistive technology with the correct expanded state automatically. Building an accordion from it instead of a div-plus-button pattern removes an entire category of ARIA states that would otherwise need to be managed by hand.

What this buys, and what it costs

A CSS-only component works before any script has parsed, survives a failed or slow bundle entirely, and inherits keyboard and screen-reader behaviour from the native control underneath it. The trade is that some interactions genuinely need script — anything requiring a value computed at runtime, or state shared across more than a simple sibling relationship — which is why this tag covers the specific set of patterns where the constraint is a feature rather than a limitation.