Interactivity & scrolling

cursor

The mouse cursor shown while the pointer is over the element. Use it to hint at what a click or drag will do.

Custom cursors come first as a comma-separated list of images, each optionally followed by the x and y of its hotspot. A keyword must always come last as the fallback.

cursor: url(pen.svg) 2 30, crosshair;

pointer-events

Whether an element can be the target of pointer events such as clicks and hovers. With none, the pointer passes through to whatever is underneath.

On HTML elements only auto and none matter. The other values are for SVG, where they choose whether the fill, the stroke or the bounding box receives events, and whether it must be visible. A descendant can set pointer-events: auto to take events again inside a parent set to none.

touch-action

Which touch gestures the browser handles itself on an element, such as panning and pinch-zooming. Gestures it does not handle go to the page's pointer event handlers instead, which is what a custom drawing surface, map or slider needs.

The values combine: pan-y pinch-zoom lets the page scroll vertically and zoom while a script handles horizontal swipes. pan-left, pan-right, pan-up and pan-down allow panning in one direction only, and are supported in Chrome only (from 55). pinch-zoom arrived later than the property itself: Chrome 56, Firefox 85, Safari 13.

user-select

Controls whether the user can select the element's text. none prevents selection, all selects the whole element in one go, and contain keeps a selection that starts inside from extending outside.

Safari supports it only with the prefix, as -webkit-user-select.

appearance

Whether a form control is drawn with the platform's native look. none strips the native styling so the control can be styled like any other box; auto keeps it.

base-select on a <select> and its ::picker(select) switches it to a fully stylable, customisable select (Chrome 135, Safari 27). The <compat-auto> keywords (button, checkbox, menulist and so on) are legacy values that behave like auto; of the <compat-special> keywords, textfield removes a search field's native styling and menulist-button draws a select as a drop-down button.

accent-color

The accent colour of native form controls such as checkboxes, radio buttons, range sliders and progress bars, so they match a brand without being rebuilt.

Safari 15.4 to 26.1 applied the colour but did not keep the control's contrast legible.

field-sizing

With content, a form control such as a text input, <textarea> or <select> sizes itself to fit what is in it, growing as the user types, instead of keeping a fixed default size.

textarea { field-sizing: content; min-block-size: 3lh; max-block-size: 12lh; }

caret-color

The colour of the text insertion caret in inputs, textareas and editable content. auto usually follows currentColor.

caret-shape

The shape of the text caret: a thin vertical bar, a block covering the next character, or an underscore beneath it. auto uses the platform's usual caret.

caret-animation

With manual, the browser stops blinking the caret, so an author's own animation of caret-color is not fighting the built-in blink. auto keeps the usual blink.

resize

Gives the element a handle the user can drag to resize it, in both axes, or only horizontally or vertically. Textareas are resizable by default; other elements need overflow set to something other than visible first.

interactivity

With inert, the element and its descendants become inert: they cannot be focused, clicked or selected and are hidden from assistive technology, just as with the HTML inert attribute, but set from a stylesheet.

interest-delay

Shorthand for interest-delay-start and interest-delay-end: how long the user must hover over or focus an interest invoker (an element with the interestfor attribute) before its target shows, and how long after they move away before it hides. One value sets both.

[interestfor] { interest-delay: 300ms 600ms; }

interest-delay-start, interest-delay-end

The delay before interest is gained (start) or lost (end). normal uses the browser's default delay.

reading-flow

Makes keyboard focus order and the order read by assistive technology follow a flex or grid container's visual layout instead of the source order, so reordered items are no longer reached out of sequence.

reading-order

Moves an item within its container's reading flow: items are read and focused in ascending reading-order, with ties falling back to the container's reading flow.

window-drag

With move, dragging the element moves the browser window. It is for installed web apps that draw their own title bar.

speak

Whether the element's text is spoken by a speech synthesiser. never silences it, always speaks it even when it is not displayed, and auto follows whether it is rendered.

Chrome's implementation does not fully follow the specification.

speak-as

How text is read aloud: spell-out reads it letter by letter, digits reads numbers one digit at a time, and literal-punctuation or no-punctuation reads punctuation out or skips it.

scroll-behavior

With smooth, scrolls triggered by navigation to a fragment or by script animate smoothly instead of jumping. Scrolling done by the user is not affected.

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

overflow-anchor

Scroll anchoring keeps the visible content still when something above it changes size, such as an image loading. none opts an element, or a whole scroll container, out of being used as the anchor.

overscroll-behavior

Shorthand for overscroll-behavior-x and overscroll-behavior-y: what happens when the user scrolls past the end of a scroll container. One value sets both axes; two set x then y.

Earlier versions (Chrome 63, Firefox 59) supported the property except on scroll containers that had no scrollable overflow; Safari 16 still has that limit. overscroll-behavior: contain on a modal or side panel stops the page behind it from scrolling once the panel reaches its end.

overscroll-behavior-x, overscroll-behavior-y, overscroll-behavior-block, overscroll-behavior-inline

Overscroll handling in one axis: the two physical axes, or the block and inline axes of the writing mode.

scroll-initial-target

With nearest, the element's nearest scroll container starts out scrolled to show it when the page first loads, for example to open a carousel on a middle slide.

scroll-axis-lock

Whether the browser may lock a user's scroll gesture to a single axis. With none, a diagonal swipe can scroll in both directions at once.

scrollbar-color

The colours of a scroll container's scrollbars: the thumb first, then the track. auto uses the platform's colours.

scrollbar-color: oklch(60% 0.1 250) transparent;

scrollbar-width

How thick the scrollbars are: the platform default, a thin variant, or none to hide them while leaving the box scrollable.

scrollbar-gutter

With stable, space for a classic scrollbar is always reserved, so the content does not shift sideways when the scrollbar appears or disappears. both-edges reserves the same space on the opposite side too, keeping content centred.

Overlay scrollbars, which float over the content, never take up a gutter, so the property has no effect on them.

scroll-snap-type

Turns a scroll container into a snap container: after the user scrolls, it comes to rest aligned to one of its children's snap positions. The first keyword picks the axis; mandatory always snaps, while proximity (the default) snaps only when a snap position is close.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.carousel > * {
  scroll-snap-align: center;
  scroll-snap-stop: always; /* never skip past a slide */
}

Snap positions are set on the children with scroll-snap-align. pair, which snaps in both axes together to a single position, is in Chrome 156 only.

scroll-snap-align

Where an element sits in the snapport when its scroll container snaps to it: aligned to the start, end or center. One value sets both axes; two set the block axis then the inline axis.

scroll-snap-stop

With always, a fast scroll must stop at this element's snap position rather than flying past it to a later one. normal allows skipping.

scroll-margin

Shorthand for the four physical scroll margins: extra space around an element that is kept in view when it is scrolled to, whether by snapping, a fragment link or scrollIntoView(). Takes one to four values in the same order as margin. It does not affect layout.

h2[id] { scroll-margin-block-start: 5rem; }

scroll-margin-block, scroll-margin-inline

Shorthands for the start and end scroll margins in the block or inline axis. One value sets both ends; two set start then end.

scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left

The scroll margin on one physical side of the element.

scroll-margin-block-start, scroll-margin-block-end, scroll-margin-inline-start, scroll-margin-inline-end

The scroll margin on one flow-relative side, mapped to a physical side by the writing mode and direction.

scroll-padding

Shorthand for the four physical scroll paddings: an inset on the scroll container that shrinks the area used when scrolling things into view, for example to keep snapped or linked content out from under a sticky header. Takes one to four values in the same order as padding. It does not affect layout.

html { scroll-padding-block-start: 4rem; }

scroll-padding-block, scroll-padding-inline

Shorthands for the start and end scroll paddings in the block or inline axis. One value sets both ends; two set start then end.

scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left

The scroll padding on one physical side of the scroll container. auto lets the browser choose, which is usually 0.

scroll-padding-block-start, scroll-padding-block-end, scroll-padding-inline-start, scroll-padding-inline-end

The scroll padding on one flow-relative side of the scroll container, mapped to a physical side by the writing mode and direction.

scroll-marker-group

Makes a scroll container generate a ::scroll-marker-group pseudo-element, placed before or after it, which holds the ::scroll-marker of each item: a row of dots or tabs that jump to the item and show which one is in view.

.carousel { scroll-marker-group: after; }
.carousel > li::scroll-marker { content: ''; }
.carousel > li::scroll-marker:target-current { background: currentColor; }

scroll-target-group

With auto, the element becomes a group of ordinary anchor links whose targets are tracked as the page scrolls; the link whose target is in view matches :target-current. Use it to highlight the current section in a table of contents.